Question

我有一个包含多个类似部分的页面，其中包含＆＃34; .imgPanel＆＃34;每当页面滚动到视图中时，我想将相同的动画应用于每个部分。

我不想为每个动画创建一个新场景，因为它们都是一样的。我知道有一种方法可以创建一个变量场景（我希望这是正确的术语），我希望有人可以提供帮助。

有谁知道如何调整下面的代码来实现这一目标。我相信如果我用下面的代码得到它的一个例子，我将能够理解并再次使用这种技术。

提前致谢。亚当。

git lfs fetch

Answer 1

在看完Ihatetomatoes video

后我发现了它

function scrollMagic() {

if (!Modernizr.touch) {

var controller = new ScrollMagic.Controller({
  duration: "100%",
});

$('.imgPanel').each(function(){

  var tween = TweenMax.from($(this), 1.4, { y: '-50px', autoAlpha: 0, 
ease: Power1.easeOut }, '-=0.2');

  var scene = new ScrollMagic.Scene ({
    duration: "100%",
    offset: -300, // offset trigger position by 100px
    triggerElement: this
  })

  .setTween(tween)
  .addTo(controller);

});
}
}

ScrollMagic - 设置变量场景

1 个答案: