ホーム エントリーへ戻る

シンプルなトゥイーン

基本アニメーションの2つの例。

  1. シーンに継続時間が定義されていない場合、スクロールがトリガー位置に達すると再生を開始する
  2. シーンに継続時間がある場合は、トゥイーンの進行状況がスクロール位置に直接対応する

この例では、Scene.setTween()の短縮バージョンを使用してTweenMax.to()アニメーションを追加する
より高度なトゥイーンを作成する方法を知るには、トゥイーンのアドバンストTweeningの例を参照する

view source

「#trigger1」要素までスクロールしたら、「背景:緑色」「scale:2.5」へ「duration:0」で、setTweenアニメーション

view source

「#trigger2」要素までスクロールしたら、「borderTop: "30px solid green"」「背景:青色」「scale:0.7」へ「duration:300」で、setTweenアニメーション

view source