ScrollMagic: анимация для каждого элемента один за другим - PullRequest
Новая
       71

ScrollMagic: анимация для каждого элемента один за другим

0 голосов
/ 21 апреля 2019

Попытка сделать так, чтобы каждый span элемент заголовка постепенно исчезал один за другим, с определенным промежутком времени между каждой анимацией .

Попытка сделать это с forпетля, но ничего не происходит, или, может быть, проблема в другом?Я все еще не уверен, должен ли new Scene быть внутри цикла или нет.Поскольку var titleTween меняет каждый цикл, я полагаю, что так и должно быть.

Может кто-нибудь найти проблему?Спасибо! 

var controller = new ScrollMagic.Controller();

$('#title').html(
  '<span>' +
  $('#title').html().split('').join('</span><span>') +
  '</span>'
);

var iMax = document.getElementById("title").length;

for (i = 0; i < iMax; i++) {
  var target = document.querySelector("h1").children[i],
    titleTween = new TweenMax.from(target, i + 1.5, {
      "opacity": 0,
      "transform": "translateY(100px)",
    });

  new ScrollMagic.Scene({
      offset: 200,
      reverse: true,
    })
    .setTween(titleTween)
    .addIndicators()
    .addTo(controller);
}
body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
  background: skyblue;
}

h1 {
  font-family: "Courgette", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
}

h1 span {
  opacity: 1;
  transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/jquery.ScrollMagic.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

<div></div>
<h1 id="title">Hello World !</h1>
<div></div>

Вот вам jsfiddle , если вам нужно.

...