スクロール時にアニメーションを実装できるScrollTrigger.js

02

こんにちは、ウェブラボ技術メモです。

今回は、画面スクロール時のアニメーション「ScrollTrigger.js」を紹介します。

まずデモページはこちら

■概要

スクロール時にアニメーションさせたい要素が表示範囲に入っているか、いないかを判定しクラスの付け替えをしてくれるプラグインです。

■実装方法

1. まずプラグインをダウンロードします。(ScrollTrigger.min.js)

2. 以下を記述(読み込みの記述とリセット)

3. HTMLでアニメーションさせたい要素に「data-scroll」を記述します。

4. cssでアニメーションを作成し完成!

HTMLにdata-scrollのみ記述した場合、デフォルトでは.invisibleと.visibleクラスが付与されます。

任意のクラスにする場合は以下のように記述します

上記以外にも様々なオプションがあります!詳しくはこちらをみてくださいね!

以上、クリエイターズメモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。