今回ご紹介するScrollTriggerは、スクロールアニメーションを実装したいときに便利なJavascriptプラグインです。jQueryなどは必要なくこれ単体で動きます。
このプラグインがやってくれることはざっくりまとめるとこんな感じです。
スクロール量と対象オブジェクトまでの距離を計測して、
オブジェクトが表示範囲に入ったらvisibleのclassを追加、
オブジェクトが表示範囲外に出たらinvisibleのclassに変える。
このclassの切り替えに対してtransitionなどを使ってアニメーションを付けていきます。
用意するもの
まずはGitHubからプラグインを手に入れましょう。
最低限必要なのはScrollTrigger.min.jsのみです。そして、Javascript側で記述するのは基本的には下記のinitのみのようです。
<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
ScrollTrigger.init();
});
</script>
基本的な使い方
ScrollTriggerはアニメーションさせたい（classの付け替えを行いたい）要素に対してdata-scrollを付与することで動きます。
<div data-scroll></div>
そして任意のcssへ下記のように、.invisibleと.visibleの設定を行うことでアニメーションの設定を行います。
どんなアニメーションにするかはここのcssでコントールを行い、プラグインではあくまでclassの付け替えタイミングなどだけを調整する仕様です。
.invisible {
transition: all 0.5s ease;
opacity: 0.0;
margin-left: 100px;
}
.visible {
transition: all 0.5s ease;
opacity: 1.0;
margin-left: 0;
}
オプションについて
GitHubにある使い方を読んでみると、オプションは上述したようにclassの付け替えタイミング関係のものが多いようです。
使い方はjsを記述するわけではなく、要素に付与したdata-scrollに対して値を入れていく方式のようです。おおまかな使い方を記述しておきます。
<div data-scroll></div> <div data-scroll="offset(0,25px)"></div> <!--offsetはclassを付け替える位置の調整としてx,yで指定する--> <div data-scroll="addHeight"></div> <!--addWidthとaddHeightは、対象要素Mの幅と高さ分をトリガーとしてclassの付け替えを発生させる--> <div data-scroll="centerVertical"></div> <!--centerHorizontalとcenterVerticalは、対象要素の大きさのちょうど半分でclassを付け替える--> <div data-scroll="once"></div> <!--classの付け替えは一度だけになる-->
ブラウザももうほとんど最新しか気にしなくていいような状況になってきているので、ちょっとしたアニメーションはこのプラグインのように軽量なcssで実装していきたいですねー。
