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

# ScrollMagicとは
[ScrollMagic](http://scrollmagic.io/)はスクロール連動のためのJavaScriptライブラリ。本記事執筆時点のバージョンは2.0.5。
以下のようなことができます。

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

[Examples](http://scrollmagic.io/examples/)で利用例とソースコードを確認できます。


# 基本的な利用方法

## スクリプト読み込み
CDNから読み込む場合。
debug.addIndicators.min.jsはデバッグ用。

```html
<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の作成

```js
var controller = new ScrollMagic.Controller();
```

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


## Sceneの作成と追加

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

```js
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](http://scrollmagic.io/examples/basic/scene_manipulation.html)で各設定値を変化させて挙動を確認できます。

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

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

### イベントの取得

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

```js
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](http://scrollmagic.io/examples/basic/class_toggles.html)では、スクロールすると"#high1"要素に"active"クラスが追加され、さらにスクロールを続けると"active"クラスが削除されます。

```js
var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}});
new ScrollMagic.Scene({triggerElement: "#sec1"}) // トリガー要素
				.setClassToggle("#high1", "active") // 対象要素と入れ替えるクラス
				.addIndicators() 
				.addTo(controller);
```
CSSと合わせて使うことで、要素の見た目を変更やアニメーションを実行できます。


# プラグイン
[ドキュメント](http://scrollmagic.io/docs/index.html)のPluginsを参照。ScrollMagic2の場合、GSAP, Velocity, addIndicators, jQueryのプラグインがあります。

## GSAPでアニメーション

Tweenライブラリといえば、GSAPの[TweenMax](https://greensock.com/tweenmax)。
[Scene Manipulation - Examples](http://scrollmagic.io/examples/basic/scene_manipulation.html)の例では、スクロール位置に応じて要素を回転させています。

```html
<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>
```

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