LoginSignup
61

More than 5 years have passed since last update.

スクロール連動のライブラリ『ScrollMagic』の基本的な使い方

Last updated at Posted at 2017-01-30

ScrollMagicとは

ScrollMagicはスクロール連動のためのJavaScriptライブラリ。本記事執筆時点のバージョンは2.0.5。
以下のようなことができます。

  • スクロール位置をトリガーにして要素のアニメーションを行う
  • スクロールバーの動きに合わせて要素を変化させる
  • 要素を特定のスクロール位置に留める(pin)
  • スクロール位置に合わせて要素のCSSクラスを入れ替える

Examplesで利用例とソースコードを確認できます。

基本的な利用方法

スクリプト読み込み

CDNから読み込む場合。
debug.addIndicators.min.jsはデバッグ用。

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

Controllerの作成

var controller = new ScrollMagic.Controller();

Controllerには後述のSceneを追加します。

Sceneの作成と追加

ブラウザをスクロールさせた時に、要素 "#target"を固定するコードは以下。

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300}) // トリガー要素、終了距離(px)
        .setPin("#target") // 指定した要素を留める
        .addIndicators( {name: "Indicator Name"}) // デバッグ用インジケータ
        .addTo(controller); // Controllerに追加

これだけでスクロール位置に応じて要素を固定する処理を実装できました。

Sceneには、duration, offset, triggerElement, triggerHook, reverse, enabledといった設定項目があります。例えばアニメーションの逆再生を行いたくない場合は、reverseをfalseにします。
Scene Manipulation - Examplesで各設定値を変化させて挙動を確認できます。

triggerHook

"onEnter", "onLeave"を指定することで、動作の開始位置を変更できます。デフォルトは"onCenter"。

var scene = new ScrollMagic.Scene({
                    triggerElement: "#trigger", 
                    triggerHook: 'onEnter', // トリガーフック指定
                    duration: 300}) 
                .setPin("#target") 
                .addTo(controller); // Controllerに追加

イベントの取得

Sceneのprogressなどを取得できます。

var scene = new ScrollMagic.Scene({ triggerElement: "#trigger", duration: 300}) 
                .setPin("#target") 
                .on("enter", function (event) {  // シーンの状態が"DURING"に入る際に発火する
                    console.log("Scene entered.");
                })
                .on("leave", function (event) { // シーンの状態が"DURING"から"BEFORE"か"AFTER"に移る際に発火する
                    console.log("Scene left.");
                })
                .on("progress", function (event) { // シーン変化の度に呼ばれる
                    console.log("Scene progress changed to " + event.progress)
                });
                .addTo(controller); // Controllerに追加

クラス切り替え(Class Toggles)

任意の要素について、スクロールに応じてクラスの追加・削除を行なうことができます。
Class Toggles - Examplesでは、スクロールすると"#high1"要素に"active"クラスが追加され、さらにスクロールを続けると"active"クラスが削除されます。

var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}});
new ScrollMagic.Scene({triggerElement: "#sec1"}) // トリガー要素
                .setClassToggle("#high1", "active") // 対象要素と入れ替えるクラス
                .addIndicators() 
                .addTo(controller);

CSSと合わせて使うことで、要素の見た目を変更やアニメーションを実行できます。

プラグイン

ドキュメントのPluginsを参照。ScrollMagic2の場合、GSAP, Velocity, addIndicators, jQueryのプラグインがあります。

GSAPでアニメーション

Tweenライブラリといえば、GSAPのTweenMax
Scene Manipulation - Examplesの例では、スクロール位置に応じて要素を回転させています。

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
var tween = TweenMax.to("#target", 1, {rotation: 360, ease: Linear.easeNone}); // Tween作成
var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
                        .setTween(tween) // Tweenをセット
                        .setPin("#target", {pushFollowers: false})
                        .addIndicators()(requires plugin)
                        .addTo(controller);

おわりに

ScrollMagicを使うことで、少ないコード量でアニメーション連動を実現することができました。
個別のアニメーションは別途作成する必要がありますが、TweenMaxやVelocity.jsと組み合わせて使えるのが便利です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61