色々なスクロールエフェクトを実装出来る ScrollMagic の使い方

ScrollMagic

スクロール関連のプラグインの中では老舗にあたるんでしょうか。かゆい所に手の届く多機能プラグインです。TweenMaxやVelocity.js、Jqueryと連携も出来ます。

エフェクトの発火位置が見た目でわかるインジケータ関数が用意されていたり、要素の通過タイミングでの発火だけでなく、指定したエリアでスクロール値に連動してのエフェクトなど本当に多様な表現が可能です。

ライセンスがMITとGPLとなっており普通に使う分には問題なさそうです。ただ、TweenMax等GSAPを使う時は、閲覧が有料のコンテンツではビジネスライセンスが必要になるとのこと。

ScrollMagic/LICENSE.md

用意するもの

コアファイルは公式サイトからダウンロード出来ますが、CDNやnpmもあります。 

<script src="ScrollMagic.min.js"></script>
<script src="debug.addIndicators.js"></script><!-- あった方が便利な確認用インジケータ -->

npm install scrollmagic

最近webpackで使うことも多いのでこちらもメモ。※インジケータ等の読み込みにはimports-loaderがあった方が良いです。 

import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

基本的な使い方

まずはControllerを用意して、それに対してScene（エフェクトの詳細）を追加していく、という実装になります。

また.addIndicators()を記述しておくことで、エフェクトの発火タイミングが目で見てわかるようになるので実装中は記述しておくと便利です。

発火タイミングのデフォルトは”ページの中央に指定要素が来たら”です。ただoffsetやtriggerHookで発火位置を変えることが出来ます。

オプションが多いので全部把握するのは大変ですが、よく使いそうな記述を列挙していきます。

指定した要素のclassの入れ替え

let controller = new ScrollMagic.Controller();

let ClassToggle = new ScrollMagic.Scene({
        triggerElement: "#classtoggle",
        offset:50 // offsetはターゲットのトリガーの位置をずらします。
    })
    .setClassToggle("#classtoggle", "red")
    .reverse(false) // 発火がOnceかスクロール位置によって繰り返すか。
    .addIndicators() 
    .addTo(controller);

指定した要素がトリガーに触れる好きなタイミングでEventを実装 

let controller = new ScrollMagic.Controller();

let EventTrigger = new ScrollMagic.Scene({ 
        triggerElement: "#eventtrigger", 
    })
    .on("enter", function (event) {
        console.log("Scene entered.");
    })
    .on("progress", function (event) {
        console.log("Scene progress changed to " + event.progress)
    })
    .on("leave", function (event) {
        console.log("Scene leave.");
    })
    .addIndicators()
    .addTo(controller);

スクロールに連動した回転アニメーション 

let controller = new ScrollMagic.Controller();

let tween = TweenMax.to("#rotate", 1, {rotation: 360, ease: Linear.easeNone});
let TweenRotate = new ScrollMagic.Scene({
        triggerElement: "#rotate", 
        duration: 300 // トリガーから300pxスクロールする間に回転させる
    })
    .setTween(tween) // Tweenをセット
    .addIndicators()
    .addTo(controller);

Sticky要素 

let controller = new ScrollMagic.Controller();

let pinScene = new ScrollMagic.Scene({
        triggerElement: "#pin",
        duration: 250,
    })
    .setPin("#pin")
    .addTo(controller);

ちょっと注意したいのはclassでも要素指定出来るんですが、それだと複数classがあった場合１つ目の要素にしかトリガーが付かない事です。そのため対象class全てに設定するのは下記のような一手間が必要です。 

let target = document.querySelectorAll('.target');
for (var i = 0; i < target.length; i++) {
    let classToggle = new ScrollMagic.Scene({
            triggerElement: target[i],
        })
        .setClassToggle(target[i], "active")
        .addIndicators() 
        .addTo(controller);
}

スクロール系のエフェクトはうまくやればユーザーに驚きを与え、伝えたい世界観を表現する大きな武器になります。やり過ぎには注意ですがうまく活用していきたいですね。

JavaScript コードレシピ集

”javascript”タグの他の記事を見る