1

作業中のシーンに TimeLineMax を追加しました。機能は問題なく機能していますが、いくつかの詳細で問題が発生しています。

このサイトhttp://www.google.com/inbox/#bundlesのようにシーンをピン留めしたいと思います。これにより、ユーザーがアニメーションを表示せずにスクロールできないように、1 つのシーン内に複数のピンが必要になります。

ここに私のこれまでの作業のデモ サイトがあります: https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container

下にスクロールすると、私の進行状況が表示されます。3 つのステップがポップアップし、アニメーションで消えます。また、スクロールに基づいて #publisher-demo-steps の背景位置を調整しました。

ただし、これは望ましい目標ではありません。1. #publisher-demo をピン留めします。 2. ステップ 1 のアニメーション背景位置をスクロールで起動します。3. 焼成ステップ 2 4. 焼成ステップ 3

アニメーションが完了するまでユーザーが次のステップに進めないように、各ステップを固定したいと思います。

私はこれが紛らわしいことを知っており、あまりにも長い間見つめてきました. 助けてくれてありがとう。これが私のスクロールマジックと GSAP コードです。

var controller = new ScrollMagic();

    var tween = new TimelineMax()
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
      .add(TweenMax.to(".blue-circle", 1, {display: "block"}))
      .add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
      .add(TweenMax.to(".red-circle", 1, {display: "block"}))
      .add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
      .add(TweenMax.to(".green-circle", 1, {display: "block"}))
      .add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));

    var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
              .setPin("#publisher-demo")
              .setTween(tween)
              .addTo(controller);
4

1 に答える 1

1

私が正しく理解している場合は、アニメーションをトリガーして、スクロールの進行状況から解放されて再生したいと考えています。

これを行う方法は、ピンを実行するシーンをリンクしないことです。シーンに持続時間が設定されるとすぐに、アニメーションの進行状況がスクロールの進行状況にリンクされます。

次に、各アニメーション トリガー ポイントにシーンを追加するだけです。

つまり、このように:

new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
          .setPin("#publisher-demo")
          .addTo(controller);

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
          .setTween(new TimelineMax()
               .to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
               .to(".blue-circle", 1, {display: "block"})
          )
          .addTo(controller);

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
          .setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
          .addTo(controller);

一般的注意事項：

  • ご覧のとおり、固定要素とは異なるトリガー要素を使用しました。固定された要素と同じ位置に絶対配置する必要があります。これを行う理由は、固定された要素が移動し、他のシーンの開始位置が間違っているためです。
  • -100の AtriggerHookは意味がありません。定義上、値は 0 から 1 の間のみです。
  • TimelineMax().add(TweenMax.to()) の代わりに、省略形の TimelineMax().to() を使用できます ( http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/を参照) 。
  • ScrollMagic 2 がリリースされてしばらく経っていることに注意してください。構文は非常に似ているため、アップグレードを検討する必要があります。
于 2015-04-28T09:17:56.003 に答える