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

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

ScrollTriggerとは

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

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

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

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

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

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

インストールコマンド

npm install @terwanerik/scrolltrigger --save

JavaScriptコード

import ScrollTrigger from '@terwanerik/scrolltrigger';
const trigger = new ScrollTrigger();
trigger.add('[data-trigger]');

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

<script src="/path/to/ScrollTrigger.min.js"><script>
・
・
・
<script>
const trigger = new ScrollTrigger.default()
trigger.add('[data-trigger]')
<script>

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

ScrollTriggerの基本操作

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

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

.visible, .invisible {
  opacity: 0.0;
  transition: opacity 0.5s ease;
}
.visible {
  opacity: 1.0;
}

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

ScrollTriggerのカスタムオプション

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

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

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サイトを制作できるよう、スクロールアニメーションの腕を磨いていきたいところです。

この記事を書いた人

なかもとソリューション事業部 マークアップエンジニア

企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。

この執筆者の最新記事

この執筆者の記事一覧

• 2024年9月20日WEB:not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう
• 2024年7月31日WEB:nth-child()擬似クラスで指定した順番・範囲の要素を取得する
• 2024年5月23日WEB脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法
• 2024年3月21日WEBCSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法