Как сделать анимацию при загрузке страницы?

Question

[tripcollor]

Хочу поставить на сайт вот такой эффект tympanus.net/Development/SegmentEffect/index.html

Но тут он показывается после нажатия на кнопку. JavaScript не знаю, подскажите как сделать чтобы все это проигрывалось после загрузки страницы.

Вот HTML код

<div class="segmenter" style="background-image: url(img/1.jpg)"></div>
			<h2 class="trigger-headline trigger-headline--hidden"><span>M</span><span>o</span><span>t</span><span>i</span><span>o</span><span>n</span></h2>
			<div class="bottom-nav">
				<button class="btn btn--trigger btn--hidden">Show Effect</button>
				<nav class="codrops-demos">
					<span>Examples: </span>
					<a class="current-demo" href="index.html">1</a>
					<a href="index2.html">2</a>
					<a href="index3.html">3</a>
					<a href="index4.html">4</a>
					<a href="index5.html">5</a>
					<a href="index6.html">6</a>
				</nav>
			</div>

И вот скрипт прикрученный к кнопке:

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

Ссылка на источник: tympanus.net/codrops/2016/09/21/background-segment...

Answer 1

[tripcollor]

Нашел решение, помогли на фрилансе =) неужели из 95 просмотревших ни кто не знал, странно ...

просто нужно было убрать стоку
trigger.addEventListener('click', function() {

вот и все работает=)

(function() {
			var headline = document.querySelector('.trigger-headline'),
				trigger = document.querySelector('.btn--trigger'),
				segmenter = new Segmenter(document.querySelector('.segmenter'), {
					onReady: function() {
						trigger.classList.remove('btn--hidden');

							segmenter.animate();
							headline.classList.remove('trigger-headline--hidden');
							this.classList.add('btn--hidden');
					}
				});
		})();

Answer 2

[asd111]

Можно попробовать так:

(function() {
      var headline = document.querySelector('.trigger-headline'),
        trigger = document.querySelector('.btn--trigger'),
        segmenter = new Segmenter(document.querySelector('.segmenter'), {
          onReady: function() {
            trigger.classList.remove('btn--hidden');
            window.onload(function() {
              segmenter.animate();
              headline.classList.remove('trigger-headline--hidden');
              trigger.classList.add('btn--hidden');
            });
          }
        });
    })();

Comments

[tripcollor]

Браузер ругается пишет что window.onload не является функцией
Uncaught TypeError: window.onload is not a function

[asd111]

tripcollor: Значит так: window.onload = function() {

[tripcollor]

Сейчас ошибки нет но все равно ничего не происходить