ビジネスとIT活用に役立つブログBlog


ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する(導入編)

この記事をシェアする:

お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必要があります。

そこで本記事ではScrollTriggerライブラリを使用したアニメーションを実現するためのクラス属性の管理方法をご紹介します。

ScrollTriggerとは

ScrollTriggerとは名前の通りwebページのスクロールに応じて、任意の操作を簡単に行うためのユーティリティライブラリです。

本記事のテーマである「スクロールに応じたアニメーション」を行う場合はクラスの着脱のみで実装できますが、ScrollTriggerはクラスの操作だけでなくコールバックイベントの提供やスクロール位置の調整、スクロールの向きに応じたイベントなど柔軟な対応が可能になっています。

また、jQuery非依存となっているためjQueryが使えないような要件がある場合でも問題なく導入できます。

ScrollTriggerのインストールと初期化

ScrollTriggerのインストールはnpmを使う方法と、CDNや自前でホスティングしているファイルをscriptタグから読み込む方法の2種類があります。

どちらも他のライブラリ同様、普通にインストールすることはできますが、初期化のやり方が少し異なります。

npmを利用したインストール

インストールコマンド

JavaScriptコード

scriptタグを利用したインストール

scriptタグを利用してインストールした場合は new ScrollTrigger.default() と記述する必要があるので注意してください。

ScrollTriggerの基本操作

先ほどの初期化処理によって、 data-trigger 属性が指定されているDOM要素に対してスクロールに応じて .visible クラスと .invisible が自動的に付与されるようになりました。

これに対してCSSでアニメーションの指定を行うだけで簡単なスクロールアニメーションを実現可能です。

※上記スタイル指定は公式リファレンスに掲載されているサンプルコードです。

ScrollTriggerのカスタムオプション

上記の指定だけでも簡単なアニメーションは実装できますが、web制作の現場では付与されるクラス名を指定したいケースは往々にしてあります。

そのような場合はScrollTriggerの初期化時にオプションデータを渡すことで挙動をカスタマイズできるようになっています。

上記のように inプロパティ  outプロパティ に付与したいクラス文字列を指定します。配列形式で指定することで複数のクラスを付与することも可能です。

このオプションを利用することで、自前でアニメーションを実装しなくても公開されているアニメーションCSSライブラリと併用することで多彩なアニメーションをwebサイトに組み込むことできるようになります。 弊社ではAnimate.cssというライブラリをよく利用しています。

また、冒頭で紹介した通り、この他にもコールバックイベントの提供やスクロール位置の調整などいくつかのオプションが用意されています。実際に利用される際にはGithubページも合わせてご確認ください。

さいごに

いかがでしたでしょうか。今回はScrollTriggerを利用してwebサイトのスクロールに合わせてアニメーションさせる方法についてご紹介しました。
過度なアニメーションは考えものですが、ユーザー体験を向上させるためにwebサイトにアニメーションを導入することは効果的だと思います。

今後もより魅力的なwebサイトを制作できるよう、スクロールアニメーションの腕を磨いていきたいところです。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!