スクロール時にアニメーションを実装できるScrollTrigger.js
2017.12.22 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
今回は、画面スクロール時のアニメーション「ScrollTrigger.js」を紹介します。
■概要
スクロール時にアニメーションさせたい要素が表示範囲に入っているか、いないかを判定しクラスの付け替えをしてくれるプラグインです。
■実装方法
1. まずプラグインをダウンロードします。(ScrollTrigger.min.js)
2. 以下を記述(読み込みの記述とリセット)
|
1 2 3 4 5 6 |
<script src="js/ScrollTrigger.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function(){ var trigger = new ScrollTrigger(); }); </script> |
3. HTMLでアニメーションさせたい要素に「data-scroll」を記述します。
|
1 |
<p data-scroll>アニメーションさせたい要素</p> |
4. cssでアニメーションを作成し完成！
HTMLにdata-scrollのみ記述した場合、デフォルトでは.invisibleと.visibleクラスが付与されます。
任意のクラスにする場合は以下のように記述します
|
1 |
<p data-scroll="toggle(任意のクラス名, 任意のクラス名(アニメ))" >アニメーションさせたい要素</p> |
上記以外にも様々なオプションがあります！詳しくはこちらをみてくださいね！
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
