2

我试图弄清楚这个ScrollMagic Demo是如何工作的。这是我在演示中使用的代码：

var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

// build scenes
new ScrollMagic.Scene({triggerElement: "#home"})
    .setTween("#home > div", {y: "100%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({triggerElement: "#work"})
    .setTween("#work", {y: "-80%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#about"})
    .setTween("#about > div", {y: "200%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);

我的印象是ScrollMagic使用的是GSAP，但我.setTween()对 ScrollMagic 的这种方法不是很熟悉。

以下是一些我不能完全理解的事情：

  • duration: 目前设置为200%。这是动画在滚动页面方面完成的持续时间吗？
  • .setTween()：第一个参数是一个 html 选择器，但是当我使用一个类时，它似乎破坏了它。第二个参数是y位置。但是这个参数是否用于在加载时偏移内容，即该#work部分是否设置为-80%加载时偏移？

我试图查看文档以解决这些问题，但他们似乎在这里使用了不同的方法。我只是在寻找一个简单的视差效果。

4

0 回答 0