How do I call the exact function on page load?

Joined
May 19, 2023
Messages
4
Reaction score
0
I am coding a website and I found this cool effects (https://github.com/codrops/SegmentEffect/) on GitHub and I was wondering, how could I make the image and the text appear exactly like that without having to press the "Show effect" button. I am wondering more specifically for the "index5.html" page.

I tried this code on the <script> section of "index5.html" and I managed to load the function without the need of the "Show effect" button, but the distortion effect is not working for some reason

HTML:
<script>
    (function() {
        var headline = document.querySelector('.trigger-headline'),
            segmenter = new Segmenter(document.querySelector('.segmenter'), {
                pieces: 8,
                positions: [
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100}
                ],
                shadows: false,
                parallax: true,
                parallaxMovement: {min: 10, max: 30},
                animation: {
                    duration: 2500,
                    easing: 'easeOutExpo',
                    delay: 0,
                    opacity: .1,
                    translateZ: {min: 10, max: 25}
                },
                onReady: function() {
                    headline.classList.remove('trigger-headline--hidden');
                }
            });
        segmenter.animate();
    })();
    </script>

I hope someone can help me, it seems pretty easy for someone experienced, but I don't really have the knowledge to understand all the code.
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
add a name to the function.
and use the event onLoad on the body tag.
the onLoad event fires the function when all the page is ready.
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<script>
    onload = function() {
        var headline = document.querySelector('.trigger-headline'),
            segmenter = new Segmenter(document.querySelector('.segmenter'), {
                pieces: 8,
                positions: [
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100}
                ],
                shadows: false,
                parallax: true,
                parallaxMovement: {min: 10, max: 30},
                animation: {
                    duration: 2500,
                    easing: 'easeOutExpo',
                    delay: 0,
                    opacity: .1,
                    translateZ: {min: 10, max: 25}
                },
                onReady: function() {
                    headline.classList.remove('trigger-headline--hidden');
                }
            });
        segmenter.animate();
    }
    </script>
 
Joined
May 19, 2023
Messages
4
Reaction score
0
HTML:
<script>
    onload = function() {
        var headline = document.querySelector('.trigger-headline'),
            segmenter = new Segmenter(document.querySelector('.segmenter'), {
                pieces: 8,
                positions: [
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100},
                    {top: 0, left: 0, width: 100, height: 100}
                ],
                shadows: false,
                parallax: true,
                parallaxMovement: {min: 10, max: 30},
                animation: {
                    duration: 2500,
                    easing: 'easeOutExpo',
                    delay: 0,
                    opacity: .1,
                    translateZ: {min: 10, max: 25}
                },
                onReady: function() {
                    headline.classList.remove('trigger-headline--hidden');
                }
            });
        segmenter.animate();
    }
    </script>
I copied the exact code and it still didn't work. Thanks though. Maybe it has to do with the original "Show effect" button?
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Maybe it has to do with the original "Show effect" button?
These are the lines of the original page code which deal with that button:

JavaScript:
trigger.addEventListener('click', function() {
                            segmenter.animate();
                            headline.classList.remove('trigger-headline--hidden');
                            this.classList.add('btn--hidden');
                        });

As you can see clicking the button fires segmentor.animate() and this is what you need to do if you want to run the code without clicking the button.
it still didn't work

Checking the browser Console for errors is an old good common practice, which helps to solve problems with non-working codes ;)
 
Joined
May 19, 2023
Messages
4
Reaction score
0
These are the lines of the original page code which deal with that button:

JavaScript:
trigger.addEventListener('click', function() {
                            segmenter.animate();
                            headline.classList.remove('trigger-headline--hidden');
                            this.classList.add('btn--hidden');
                        });

As you can see clicking the button fires segmentor.animate() and this is what you need to do if you want to run the code without clicking the button.


Checking the browser Console for errors is an old good common practice, which helps to solve problems with non-working codes ;)
Thank you so much!!!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,346
Latest member
EstebanCoa

Latest Threads

Top