ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する(導入編)
お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必要があります。
そこで本記事ではScrollTriggerライブラリを使用したアニメーションを実現するためのクラス属性の管理方法をご紹介します。
ScrollTriggerとは
ScrollTriggerとは名前の通りwebページのスクロールに応じて、任意の操作を簡単に行うためのユーティリティライブラリです。本記事のテーマである「スクロールに応じたアニメーション」を行う場合はクラスの着脱のみで実装できますが、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が好き。
この執筆者の最新記事
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー