Web事業部実績紹介
Web事業部実績紹介
2015.06.24

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

づや

こんにちは、づやです。

以前、ScrollMagicについて「ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう」という記事を書いたのですが、気づいたらバージョンが上がって少し使い方が変わっていたので、現時点(2015年06月)での最新バージョン2.0.5の使い方を書こうと思います。

大きな変更点

1番の変更点は、jQueryGSAP(TweenMax)が必須ではなくなった点です。

いままでは、メジャーなライブラリとは言え2つのライブラリが必須ということで、選択できないシーンもあったのではないでしょうか。
こちらの変更点により、ScrollMagicを選択できるプロジェクトは増えそうです。別途プラグインを読み込むことにより、以前のようにGSAPも使用することが可能です。

また、新たにvelocity.jsにも対応できるようになっています。
スクロールに合わせたアニメーションの選択肢が増えるのは単純にうれしいですね。

基本の使い方

基本的な使い方に大きな変わりはありません。ScrollMagic本体を読み込み、必要に応じてライブラリに対応したプラグインを読み込みます。

今回は、CDNから直接読み込むかたちで記載していきます。
※Bowerやnpmなどにも対応しています。詳しくは下記リンクの公式ドキュメントをご参照ください。

http://scrollmagic.io/docs/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); // 作成したシーンをコントローラに設定します。
		}
  • 1
  • 2