ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する（導入編）
お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必要があります。
そこで本記事ではScrollTriggerライブラリを使用したアニメーションを実現するためのクラス属性の管理方法をご紹介します。
ScrollTriggerとは
ScrollTriggerとは名前の通りwebページのスクロールに応じて、任意の操作を簡単に行うためのユーティリティライブラリです。本記事のテーマである「スクロールに応じたアニメーション」を行う場合はクラスの着脱のみで実装できますが、ScrollTriggerはクラスの操作だけでなくコールバックイベントの提供やスクロール位置の調整、スクロールの向きに応じたイベントなど柔軟な対応が可能になっています。
また、jQuery非依存となっているためjQueryが使えないような要件がある場合でも問題なく導入できます。
ScrollTriggerのインストールと初期化
ScrollTriggerのインストールはnpmを使う方法と、CDNや自前でホスティングしているファイルをscriptタグから読み込む方法の2種類があります。
どちらも他のライブラリ同様、普通にインストールすることはできますが、初期化のやり方が少し異なります。
npmを利用したインストール
インストールコマンド
|
1 |
npm install @terwanerik/scrolltrigger --save |
JavaScriptコード
|
1 2 3 |
import ScrollTrigger from '@terwanerik/scrolltrigger'; const trigger = new ScrollTrigger(); trigger.add('[data-trigger]'); |
scriptタグを利用したインストール
|
1 2 3 4 5 6 7 8 |
<script src="/path/to/ScrollTrigger.min.js"><script> ・ ・ ・ <script> const trigger = new ScrollTrigger.default() trigger.add('[data-trigger]') <script> |
ScrollTriggerの基本操作
先ほどの初期化処理によって、 data-trigger 属性が指定されているDOM要素に対してスクロールに応じて .visible クラスと .invisible が自動的に付与されるようになりました。
これに対してCSSでアニメーションの指定を行うだけで簡単なスクロールアニメーションを実現可能です。
|
1 2 3 4 5 6 7 |
.visible, .invisible { opacity: 0.0; transition: opacity 0.5s ease; } .visible { opacity: 1.0; } |
※上記スタイル指定は公式リファレンスに掲載されているサンプルコードです。
ScrollTriggerのカスタムオプション
上記の指定だけでも簡単なアニメーションは実装できますが、web制作の現場では付与されるクラス名を指定したいケースは往々にしてあります。
そのような場合はScrollTriggerの初期化時にオプションデータを渡すことで挙動をカスタマイズできるようになっています。
|
1 2 3 4 5 6 7 8 9 10 |
const trigger = new ScrollTrigger.default({ trigger: { toggle: { class: { in: ['visible', 'is-show'], out: ['invisible', 'hide'], }, }, }, }); |
上記のように inプロパティ と outプロパティ に付与したいクラス文字列を指定します。配列形式で指定することで複数のクラスを付与することも可能です。
このオプションを利用することで、自前でアニメーションを実装しなくても公開されているアニメーションCSSライブラリと併用することで多彩なアニメーションをwebサイトに組み込むことできるようになります。 弊社ではAnimate.cssというライブラリをよく利用しています。
また、冒頭で紹介した通り、この他にもコールバックイベントの提供やスクロール位置の調整などいくつかのオプションが用意されています。実際に利用される際にはGithubページも合わせてご確認ください。
さいごに
いかがでしたでしょうか。今回はScrollTriggerを利用してwebサイトのスクロールに合わせてアニメーションさせる方法についてご紹介しました。
過度なアニメーションは考えものですが、ユーザー体験を向上させるためにwebサイトにアニメーションを導入することは効果的だと思います。
今後もより魅力的なwebサイトを制作できるよう、スクロールアニメーションの腕を磨いていきたいところです。
なかもと
最新記事 by なかもと (全て見る)
- Adobe XDのプラグイン「Copy CSS to Clipboard」を使ってCSSコーディングを効率化 - 2021年1月21日
- ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する（導入編） - 2020年9月26日
- YouTube IFrame Player APIを利用してwebサイトに動画を埋め込む（導入編） - 2020年9月14日
- Adobe XDのコンポーネントを利用してホバーアクションをデザインする - 2020年7月21日
- Dreamweaver CCでSassを使ってCSSファイルをコンパイルする（CSSプリプロセッサー機能） - 2020年4月16日
おすすめ関連記事
最新記事
