animate.cssとScrollTrigger.jsでアニメーションを設定する方法

animate.cssとScrollTrigger.jsを使用してWebサイトにアニメーションをつけてみます。

animate.cssでスクロールイベントを設定するで検索すると「wow.js」と合わせて紹介されている記事が多いのですが、wow.jsは商用利用は有料になったようです。

なので、wow.jsではなく「ScrollTrigger.js」を使用してスクロールイベントを設定します。

animate.cssは設定するとすぐにアニメーションが実行されてしまうので、スクロールイベントを設定して指定の場所までスクロールした時だけ実行されるようにする必要があります。

各ページへのリンク

animate.css:https://github.com/daneden/animate.css
ScrollTrigger.js :https://github.com/terwanerik/ScrollTrigger

スポンサードサーチ



ScrollTrigger.jsを選んだ理由

wow.jsに代わりScrollTrigger.jsを選んだのは以下の理由からです。

  1. 短いコードで設定できる
  2. 個別の設定が簡単にできる
  3. ライブラリの容量が少ない

また、JQueryを使用せずに実装することができます。

 

短いコードで設定できる

初期設定

 

HTMLの記述

アニメーション処理をしたい要素に[date-scroll]属性を設定します。

個別の設定が簡単にできる

見比べてみるとわかりますが、別々のアニメーションのクラス追加が簡単に設定できます。
各動作ごとにJavaScriptのコードを記述する必要がありません。

ライブラリの容量が少ない

wow.jsのライブラリは縮小版で8kb、こちらは縮小版で 6.72 KBと軽いためメモリへの影響が少ないです。

 

animate.cssとScrollTrigger.jsでアニメーションの設定

animate.cssはアニメーションのクラスとアニメーションを動作させる「.animated」というクラスを使用して動作させます。

ここで気をつけておきたいのは、animate.cssでスクロールしてアニメーションを実行させるためには、クラスを追加する順番がアニメーションの実行に関係があるようです。

実行させるには「.animated」→「クラスのアニメーション」という順でクラスを追加します。

ここではScrollTrigger.jsを使用して指定の位置までスクロールしたら、「クラスのアニメーション」を追加し実行させます。

具体的には以下のようなコードになります。

 

DEMOのサンプルコードの一部

 

ScrollTrigger.jsを使用すれば最小限のコードでスクロールイベントを実行させることができ、animate.cssとも非常に相性がいいです。

各仕様についての詳細は以下のページを参照してください。

各ページへのリンク

animate.css:https://github.com/daneden/animate.css
ScrollTrigger.js :https://github.com/terwanerik/ScrollTrigger