ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう

こんにちは、CTOのづやです。

サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。

0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。
こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。

使うための準備

まずはこちらのGitHubから。
ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。

読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。

    <script src="js/TweenMax.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.scrollmagic.min.js"></script>

スクロールに応じて要素が見えたらアニメーションさせる

一番基本的な形になるかと思います。
TweeMaxでアニメーションを定義して、ScrollSceneで動作する位置を設定して、コントローラに渡すといった流れを踏みます。
コードにすると↓のような感じです。

// 全体を制御するコントローラをつくります
var controller = new ScrollMagic();

// TwennMaxで動くアニメーションをつくります。
// これはidがbasicMove1の要素を0.5秒かけてopactyを1にするアニメーション
var tween = TweenMax.fromTo("#block1", 0.5, {opacity:0} , {opacity: 1});

// シーンをつくります。
// triggerElementに渡した要素が表示範囲にはいったらsetTweenで渡したアニメーションが実行されます
var scene = new ScrollScene({triggerElement: "#trigger1"}) 
                .setTween(tween)
                .addTo(controller); 

デフォルトではtriggerElementに渡した要素がスクロールされ、表示範囲の半分にきたらsetTweenで渡したアニメーションが発火されます。
triggerHookを指定することで、発火位置を変更できます。

// こんな感じにすると一番上に来たとき発火されます。
// onEnter を設定すると画面内に入った瞬間に発火します。
// 渡せるは3種類「onCenter」「onEnter」「onLeave」でデフォルトはonCenterになってます
var scene = new ScrollScene({triggerElement: "#trigger1" , triggerHook : "onLeave"}) 

特定の位置で要素を止める

「普通にスクロールさせていき、特定の位置で要素が動かないようにしたい」なんてことも簡単に実装が可能です。
止めておきたい要素でシーンを作り、setPinを呼びます。

// idがblock2の要素が一番上にきたら2500px分idがblock2の要素を固定する
var scene = new ScrollScene({triggerElement: "#block2", duration: 2500 , triggerHook : "onLeave"})
                 .setPin("#block2")
                 .addTo(controller);

スクロールの位置に応じて要素を変化させる

スクロールが所定の位置にきたらアニメーションさせたい、スクロールに連動して少しずつ状態を変化させていきたい、なんて場合も簡単に実装が可能です。
↓のようなシーンに対して、progressイベントを設定します。

var $moveObj = $("#"moveObj);
var scene3 = new ScrollScene({triggerElement: "#block", duration: 1250})
                .on("progress", function (prog) { // 使いたいシーンに対してprogressイベントを設定します
                    var p = prog.progress; // 0～1の値が入ってきます
                    moveObj.css({
                        opacity: 1 * p //opacityをprogressの値に応じて変化させます。
                    });
                })
                .addTo(controller);

まとめ

以上、一番よく使われるであろう機能に関してだけ書いてみました。
今回書いた機能を利用したデモがこちらです。

その他にもパララックス対応だったりモバイル対応だったり、諸々のサンプルが公式のデモサイトに載っております。
うまく利用してカッコいいサイトを作っていきたいですね。それでは。

※この記事はScrollMagic v1.3.0にて検証をしています。