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を選んだのは以下の理由からです。
- 短いコードで設定できる
- 個別の設定が簡単にできる
- ライブラリの容量が少ない
また、JQueryを使用せずに実装することができます。
短いコードで設定できる
初期設定
|
1 2 3 4 5 6 |
<script src="./js/ScrollTrigger.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var trigger = new ScrollTrigger(); }); </script> |
HTMLの記述
アニメーション処理をしたい要素に［date-scroll］属性を設定します。
|
1 |
<div data-scroll="">コンテンツ</div> |
個別の設定が簡単にできる
|
1 2 3 4 5 6 7 8 9 10 11 |
//animate.cssのアニメーション設定 //bounce 跳ねるアニメーション <div class="sample animated" data-scroll="once toggle(.bounce, .invisible) addHeight"> bounce </div> //flash 点滅するアニメーション <div class="sample animated" data-scroll="once toggle(.flash, .invisible) addHeight"> flash </div> |
見比べてみるとわかりますが、別々のアニメーションのクラス追加が簡単に設定できます。
各動作ごとにJavaScriptのコードを記述する必要がありません。
ライブラリの容量が少ない
wow.jsのライブラリは縮小版で8kb、こちらは縮小版で 6.72 KBと軽いためメモリへの影響が少ないです。
animate.cssとScrollTrigger.jsでアニメーションの設定
animate.cssはアニメーションのクラスとアニメーションを動作させる「.animated」というクラスを使用して動作させます。
ここで気をつけておきたいのは、animate.cssでスクロールしてアニメーションを実行させるためには、クラスを追加する順番がアニメーションの実行に関係があるようです。
実行させるには「.animated」→「クラスのアニメーション」という順でクラスを追加します。
ここではScrollTrigger.jsを使用して指定の位置までスクロールしたら、「クラスのアニメーション」を追加し実行させます。
具体的には以下のようなコードになります。
|
1 2 |
//指定の位置までスクロールしたら「.bounce」をクラスに追加する <div class="sample animated" data-scroll="toggle(.bounce, .invisible) addHeight"> |
|
1 2 |
//こちらのコードではアニメーションは実行されません <div class="sample bounce" data-scroll="toggle(.animated, .invisible) addHeight"> |
DEMOのサンプルコードの一部
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./css/animate.css"> <title></title> </head> <style type="text/css"> .sample { position: relative; color: #fff; line-height: 150px; font-size: 2em; width: 400px; height: 150px; margin: 0 auto; background: #5581EA; text-align: center; } .invisible{ transition: opacity 0.5s ease; opacity: 0.0; } </style> <body> <div class="sample animated" data-scroll="toggle(.bounce, .invisible) addHeight"> bounce </div> <div class="sample animated" data-scroll="toggle(.flash, .invisible) addHeight"> flash </div> <div class="sample animated" data-scroll="toggle(.pulse, .invisible) addHeight"> pulse </div> <div class="sample animated" data-scroll="toggle(.rubberBand, .invisible) addHeight"> rubberBand </div> <div class="sample animated" data-scroll="toggle(.shake, .invisible) addHeight"> shake </div> <script src="./js/ScrollTrigger.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var trigger = new ScrollTrigger(); }); </script> </body> </html> |
ScrollTrigger.jsを使用すれば最小限のコードでスクロールイベントを実行させることができ、animate.cssとも非常に相性がいいです。
各仕様についての詳細は以下のページを参照してください。
animate.css:https://github.com/daneden/animate.css
ScrollTrigger.js :https://github.com/terwanerik/ScrollTrigger
