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

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と組み合わせて使えるのが便利です。