カンタン・便利! ScrollMagicのパララックスサンプルを解説。

ScrollMagic
こんにちは。最近ムーミンの愛らしさに魅せられまくっているアンドレです。

さて、一時のブームは過ぎたとはいえ、見せ方としてまだまだパララックスの需要というのは多いかと思います。
僕もとりあえず簡単に実装してみたいと思い、良さそうなライブラリを探していたところ、ScrollMagicというライブラリの存在を知りました。
豊富なサンプルがありどれも良くできていますが、今回はその中でも当初の目的であるパララックスのサンプルに絞って解説したいと思います。
ちなみにサンプルは基本的にPCを対象としていますので、PCでご覧ください。

ScrollMagicとは

スクロールイベントの発火地点やその長さ、さらには動き等まで指定できるライブラリです。
バージョン2になってからは、jQueryとTweenMax(後述)が必須でなくなり、さらにvelocity.jsにも対応しました。
(TweenMaxおよびvelocity.jsはともにアニメーションライブラリです)。
ブラウザサポートはFirefox 26以上、Chrome 30以上、Safari 5.1以上、Opera 10以上、IE 9以上となっています。

TweenMaxについて

TweenMaxはGreenSockという企業の製品であるため、ライセンスの取り扱いには注意が必要です。
具体的には、使用したサイトやアプリが不特定多数のユーザーに対して有料である場合(有料会員サイトや有料アプリ等)は、ライセンスを購入する必要がありますが、それ以外はコマーシャルサイトでも問題なく使用することができます。
こちらのパフォーマンステストでは、jQuery比で約2倍のFPSを叩きだしています。
欧米ではかなりメジャーなライブラリのようなので、使えるようになっておくとよいかと思います。

導入部

<script type="text/javascript" src="ファイルまでのパス/TweenMax.min.js"></script>
<script type="text/javascript" src="ファイルまでのパス/ScrollMagic.js"></script>
<script type="text/javascript" src="ファイルまでのパス/animation.gsap.js"></script>
<script type="text/javascript" src="ファイルまでのパス/debug.addIndicators.js"></script>

ScrollMagic.jsの後のanimation.gsap.jsはScrollMagicでGreenSock製のライブラリ(ここではTweenMax)を使うためのものです。
velocity.jsを使う際はそれぞれ、velocity.jsとanimation.velocity.jsに変更しましょう。
最後のdebug.addIndicators.jsはデバッグ用にaddIndicatorsメソッドを追加するもので、動作には不要です。

サンプル1:Parallax Scrolling

20150907_image02
サンプルへのリンク

スクリプト部分抜粋

var controller = new ScrollMagic.Controller({vertical: false});

$(function () { // wait for document ready
    // build tween
    var tween = new TimelineMax ()
        .add([
            TweenMax.to("#parallaxContainer .layer1", 1, {backgroundPosition: "-40% 0", ease: Linear.easeNone}),
            TweenMax.to("#parallaxContainer .layer2", 1, {backgroundPosition: "-500% 0", ease: Linear.easeNone}),
            TweenMax.to("#parallaxContainer .layer3", 1, {backgroundPosition: "-225% 0", ease: Linear.easeNone})
        ]);

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#parallaxContainer", duration: 2000, offset: 450})
                    .setTween(tween)
                    .setPin("#parallaxContainer")
                    .addIndicators() // add indicators (requires plugin)
                    .addTo(controller);
});

まず最初に、スクロール領域を操作するコントローラーを定義しています。オプションにvertical: falseを渡すことで、領域内のスクロール感知を水平方向に変更しています。

次はアニメーション定義です。
TimelineMaxはその名の通りタイムライン(時系列)でアニメーションを指定するもので、配列でaddすることで同時に動くようにしています。
配列で渡されているTweenMaxのtoメソッドは操作対象要素の最後の状態を指定するもので、対になるのがfromメソッド(初期状態を指定)です。両方指定するfromToメソッドというのもあります。
引数はそれぞれ「操作する要素、かかる時間(=スクロール量に対する変化量となる)、プロパティおよびオプション」となっています。

その次はシーンを定義します。
シーンは、どのタイミングでどういう動作をさせるかを指定するものです。
まずは、オプションを渡しつつインスタンス化します。
「triggerElement」はその名の通り動作の開始地点となる要素を指定します。ちなみにデフォルトでは指定した要素が画面の中央に来た時に開始するようになっています。
「duration」は動作の開始から終了までのスクロール領域の長さです。サンプルでは2000(px)となっています。
「offset」は基本の開始地点(このサンプルでは対象要素の左端)をどれだけズラすかの指定です。サンプルの対象要素の幅は900pxなので、450(px)ズラすことで要素の中央からスタートするようになっています。
次にsetTweenメソッドで先ほど定義したアニメーション、tweenを渡し、さらにsetPinメソッドで引数で渡した要素を固定しています。addIndicatorsはデバッグ用です(イベントトリガー等を可視化します)。
最後に、このシーンをcontrollerに渡して有効化します。

2つめの文字サンプルのほうはあまり変わらないので割愛します。

サンプル2:Parallax Sections

20150907_image03
サンプルへのリンク

スクリプト部分抜粋

// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
                .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax2"})
                .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax3"})
                .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

基本的にはサンプル1とそれほど変わりません。
ControllerのオプションにglobalSceneOptionsというのが渡されていますが、これはこのコントローラーに渡されたシーンのオプションの初期値を設定するもので、ここで設定された値はシーンの設定値を上書きするので要注意です。
「triggerHook」は対象要素がどの位置に来た時に動作を開始するかを指定するもので、デフォルトは”onCenter”(=中央)となっています。”onEnter”は画面領域に入ってくる時、”onLeave”は出て行く時となっていて、それぞれ数値で0.5、1、0という指定もできます。数値であれば細かい調整も効きます。
そして、setTweenで指定されている「y: “80%”」で、translateのY値に対する操作をし、これによって対象要素がスクロールについてくる速度が80/100(20%遅い)となり、視差効果が生まれています。
ちなみに、似た指定で「yPercent: “80”」というのもあります。この2つは、前者は元の指定を無視しますが、後者は計算に入れる、という点が異なっています。

まとめ

記事にしてはみましたが、こうして見るとそれほど解説すべき箇所は多くなかったような… 逆に言えば、それだけシンプルで使いやすいということでしょう。
もちろん、基本がシンプルなだけで、やろうと思えば相当凝ったこともできます。そういった点で、学習コストを費やす価値は十分あると思います。
僕もTweenMaxともども使いこんでいき、イケてる動きのあるサイトを作れるように頑張ります!