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を使用しているという印象を受けましたが、この ScrollMagic の方法にはあまり詳しくありません。.setTween()

以下は、私が完全に理解できないことの一部です。

  • duration：現在は に設定されてい200%ます。これは、ページのスクロールに関してアニメーションが完了するまでにかかる時間ですか?
  • .setTween(): 最初のパラメーターは html セレクターですが、クラスを使用すると壊れてしまうようです。2 番目のパラメーターはy位置です。しかし、このパラメーターはロード時にコンテンツをオフセットするために使用されますか? つまり、#workセクションは-80%ロード時にオフセットに設定されますか?

ドキュメントを調べてこのことを理解しようとしましたが、ここでは別の方法を使用しているようです。私は単純な視差効果を探しています。

4

0 に答える 0