Javascript 理解卷轴魔术

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

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正在使用，但我对ScrollMagic的

.setTween（）

方法不是很熟悉

以下是一些我无法完全理解的事情：

• duration

  ：当前，它被设置为

  200%

  。在滚动页面方面，这是动画完成所需的持续时间吗

• .setTween（）

  ：第一个参数是html选择器，但当我使用类时，它似乎会破坏它。第二个参数是

  y

  位置。但是此参数是否用于在加载时偏移内容，即

  #工作
  部分是否设置为在加载时偏移
  -80%

---

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

是

1

secondtween的缩写。为了让这项工作正常进行，你必须导入插件，当然也必须导入（或根据你的喜好）库本身。我强烈推荐Petr Tichy关于这个主题的文章，特别是如果你还没有看过的话。谢谢你的帮助，真的很有见地！