こんにちは、づやです。
以前、ScrollMagicについて「ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう」という記事を書いたのですが、気づいたらバージョンが上がって少し使い方が変わっていたので、現時点（2015年06月）での最新バージョン2.0.5の使い方を書こうと思います。
大きな変更点
1番の変更点は、jQueryとGSAP（TweenMax）が必須ではなくなった点です。
いままでは、メジャーなライブラリとは言え2つのライブラリが必須ということで、選択できないシーンもあったのではないでしょうか。
こちらの変更点により、ScrollMagicを選択できるプロジェクトは増えそうです。別途プラグインを読み込むことにより、以前のようにGSAPも使用することが可能です。
また、新たにvelocity.jsにも対応できるようになっています。
スクロールに合わせたアニメーションの選択肢が増えるのは単純にうれしいですね。
基本の使い方
基本的な使い方に大きな変わりはありません。ScrollMagic本体を読み込み、必要に応じてライブラリに対応したプラグインを読み込みます。
今回は、CDNから直接読み込むかたちで記載していきます。
※Bowerやnpmなどにも対応しています。詳しくは下記リンクの公式ドキュメントをご参照ください。
http://liginc.co.jp/wp-content/uploads/2015/10/index.html
ライブラリを使用しない場合
ScrollMagicを読み込みます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <!-- 本体の読み込み -->
<script scr="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script><!-- こちらはdebug用。読み込んでおくと便利 -->2行目はdebug用の値を使用する場合のみ必要になります。読み込んだあとの使い方は、以前とそんなに変わりません。
地味に引数や関数名がバージョン1から変更されています。
下記のように記載することで、スクロール中に要素を固定させています。
// 全体を制御するコントローラをつくります
var controller = new ScrollMagic.Controller();
// トリガーになる位置を指定してアニメーションを設定する
// Sceneクラスが名前が変更されています。
var scene = new ScrollMagic.Scene({
triggerElement: "#basicMove1" ,
duration: 1000 , // 1000pxスクロールするまで動作します。
offset :0 // triggerElement
})
.setPin("#basicMove1") // この要素を一定期間固定させています。
.addIndicators({name: "1 (duration: 300)"}) // debugコードを読みこんでいる場合、こいつを呼ぶとシーンのいろいろな情報が画面に表示されます。
.addTo(controller); // 作成したシーンをコントローラに設定します。
}LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
