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

こんにちは、づやです。

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

大きな変更点

1番の変更点は、jQueryとGSAP（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); // 作成したシーンをコントローラに設定します。
		}

GSAPを使用する場合

次に以前のバージョンで利用できたGSAPを読み込み、アニメーションに使用する場合の記載です。
以下のようにGSAPを読み込み、対象のプラグインも新たに読み込みます。
※今回はGSAPもCDNから読み込んでいます。

	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script><!-- GSAPの読み込み -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script><!-- GSAP用プラグインの読み込み -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

その後は以前のバージョンのように使用することが可能です。
スクロールに合わせてopacityを変更するアニメーションを実装したのが↓のコードです。

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

			// トリガーになる位置を指定してアニメーションを設定します
			var scene = new ScrollMagic.Scene({
						triggerElement: "#block1" ,
						offset :0
					})
					.setTween("#basicMove1", 2, {opacity:0})  // #block1の要素に到達した際に、対象要素のopacityを2秒かけて0にします
																 // TweenMaxの関数、toと同様の指定が可能です。
					.addIndicators({name: "1 (duration: 0)"})
					.addTo(controller);

以前のバージョンとそこまで変わらない感覚で利用可能です。

Velocity.jsを使用する場合

続いて新たにサポートされたvelocity.jsを使用する方法です。
読み込み方法は以下のような形です。
GSAPの場合と同様、ライブラリを読み込んだのち、対象のプラグインを読み込みます。

	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

後はGSAPの時とほぼ同様に設定が可能です。

			var scene = new ScrollMagic.Scene({
						triggerElement: "#block1" ,
						offset :0
					})
					.setVelocity("#basicMove1", {opacity: 0}, {duration: 2000})  // #block1の要素に到達した際に、対象要素のopacityを2秒かけて0にします
																					  // Velocity.jsで要素をアニメーションさせる際と同様の指定が可能です。
					.addIndicators({name: "1 (duration: 0)"})
					.addTo(controller);

ScrollMagicのバージョン2系はこんな感じに利用可能です。
次回は細かい機能について書けたらと思います。

【関連リンク】

Web制作

2014.11.25

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

こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「Scrol[…]

Web制作

2014.12.25

CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法

どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう 画像 まず画像が必要ですね。今回はこのよう[…]

Web制作

2015.04.02

SVGのpathを使ったモーションパスアニメーションの実装方法

こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】   ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方[…]