How do I call the exact function on page load?

[santlattuf]

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

<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.

 

[FResher]

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.

 

[Padonak]

<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>

 

[santlattuf]

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.

Thank you for the reply. I tried it and it didn't work sadly

 

[santlattuf]

<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?

 

[Padonak]

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:

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

 

[santlattuf]

These are the lines of the original page code which deal with that button:

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!!!