How to load a script without pressing a button, JS

Question

Good afternoon, please help. How to make the script work immediately after the page loads, and not when pressing the button - Template example is here - Template

Human Thanks, just learning and I wanted to know

<div class="segmenter" style="background-image: url(img/5.jpg)"></div> <h2 class="trigger-headline trigger-headline--hidden"><span>З</span><span>а</span><span>д</span><span>а</span><span>ч</span><span>и</span></h2> </h2> <div class="bottom-nav"> <button class="btn btn--trigger">! </button> </div> </main> <script src="js/anime.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/main.js"></script> <script> (function() { var headline = document.querySelector('.trigger-headline'), trigger = document.querySelector('.btn--trigger'), 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} ], 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() { trigger.classList.remove('btn--hidden'); trigger.addEventListener('click', function() { segmenter.animate(); headline.classList.remove('trigger-headline--hidden'); this.classList.add('btn--hidden'); }); } }); })(); </script> <hr>

You about this site trigger.addEventListener('click', function() {...}) ?

Vadim Leshkevich Vadim Leshkevich 2,902 6 23 · Accepted Answer · 2016-12-13T18:58:06

Instead

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

Make a

  onReady: function() { segmenter.animate(); headline.classList.remove('trigger-headline--hidden'); }

@EziS do not need to find the answer when it is in front of you.
You turn on the logic and see that when you click on a button, such things happen, look for the announced event, and throw up its calls.

Answer 2 · 2016-12-13T18:58:53

Instead of this:

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

This:

 onReady: function() { segmenter.animate(); headline.classList.remove('trigger-headline--hidden'); trigger.classList.add('btn--hidden'); };

But why first remove the class btn--hidden from the button, and then immediately add it back?

How to load a script without pressing a button, JS

2 answers 2

More articles: