Как загрузить скрипт без нажатия на кнопку, JS

344
21 декабря 2016, 03:54

Добрый день, пожалуйста помогите Как сделать так, чтобы скрипт срабатывал сразу после загрузки страницы, а не при нажатий на кнопку - Пример шаблона здесь - Образец

Человеческое Спасибо, только учусь и хотелось узнать

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

Вместо

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

Сделайте

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

Вместо этого:

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

Вот это:

onReady: function() {
   segmenter.animate();
   headline.classList.remove('trigger-headline--hidden');
   trigger.classList.add('btn--hidden');
};
READ ALSO
Подключить файлы css cordova

Подключить файлы css cordova

Пытаюсь подключить свои css файлы в indexhtml проекта cordova стандартным способом

298
Как поделить форму ввода на ячейки?

Как поделить форму ввода на ячейки?

Вместо обычной формы ввода не получается сделать чтобы для каждого введенного символа была своя ячейка

283
Существует ли способ указать min-padding?

Существует ли способ указать min-padding?

Существует ли способ указать min-padding?

303