ScrollMagicでスクロールに合わせてアニメーションをつくる

ScrollMagicはスクロール位置に応じた操作できるJavaScriptライブラリ。有名なギャラリーサイトに掲載されているようなウェブサイトによく使われている。数カ月ぶりに触ったら忘れてたので簡単に使い方をメモ。

janpaepke/ScrollMagic

ScrollMagicでは次のようなことができる。具体的な挙動は Examples を参照。

・スクロール位置に基づいてに応じてアニメーションを行う
・スクロールバーの動きに同期したアニメーションを行う
・特定のスクロール位置で要素を固定する
・パララックス効果
・スクロール位置に基づいてclassをオンとオフを切り替える

ブラウザのサポートはFirefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+。

似たようなことができるJavaScriptプラグインもあるけど、最近はScrollMagic一択？どっちにせよ簡単にできる。

terwanerik/ScrollTrigger

imakewebthings/waypoints

👉 導入

公式サイトを参照。CDN、Bower、npm、ダウンロードが選べる。執筆時点での最新バージョンは2.0.7。

CDNの場合

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

npmの場合

npm install scrollmagic

debug.addIndicators.min.jsはデバッグ用。インジケータを表示できる。どこでイベントが発火するのかわかりやすくなるので開発中は使用してみる良さげ。

👉 ControllerとSceneを作成

// 全体を制御するコントローラを作成
// 大抵のサイトでは、ブラウザ・ウィンドウ用に1つのコントローラーをもつ
const controller = new ScrollMagic();
   
// シーンを作成
let scene = new ScrollMagic.Scene({
  triggerElement: "#sticky-element", // トリガー
  triggerHook: 'oEnter', // トリガーが見えたら
  duration: 100, // 100pxスクロールするまで
  offset: 50, // 50pxスクロールしたら
  reverse: false, // 逆スクロールに対応しない
})
.setPin('#sticky-element') // 指定した要素を固定
.setClassToggle('#sticky-element', 'sticky'); // classを追加
.addIndicators({ name: 'sticky!' }) // デバッグ用インジケータの表示
.addTo(controller); // controllerに追加
   

上記の例では #sticky -element が onEnter して 50px スクロールしたら、要素を固定。100pxスクロールしたら固定を解除する。

triggerElement
トリガーとなる要素の指定

triggerHook
発火位置を指定する。onCenter, onEnter, onLeave の3種類。デフォルトは onCenter

duration
実行する期間を指定する。デフォルトは0

offset
triggerHookからさらにスクロールした位置を指定。デフォルトは0

reverse
スクロールを戻した際に逆再生するかどうか。true or false

classの付け替えでCSSアニメーションしてもいいし、アニメーションライブラリのGSAPと合わせるのが良き。それはまた書く。

GreenSock

さらにこれも最近よくみる、ぬめっとした慣性スクロールも合わせて使うとそれっぽい。ウェブデザインのオリジナリティとは...という感じだけど。それも書くかも。

👉 参考記事

・ScrollMagicで簡単実装！「ふわっ」と文字が現れるスクロールアニメーション
・カンタン・便利！　ScrollMagicのパララックスサンプルを解説。
・ScrollMagic のドキュメントを翻訳する