テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。
Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメーション（動き）を付けることができます。
公式サイトでAnimate.cssを使うとどんなアニメーションを付けることが出来るかが確認できます。
かなり色々なアニメーションを付ける事ができますね。
早速使ってみましょう！
Animate.cssの基本
では一番簡単なものを作っていきます。
HTML側
|
1 2 |
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'> <div class="animated bounce">bounce</div> |
2行追加するだけで動作します。
[ 実行結果 ]
画面が表示された時に「bounce」という文字がバウンドして表示されます。
[ 2行目 ]
Animate.cssを読み込んでいます。
本番で使う場合はダウンロードして使ってくださいね。
[ 3行目 ]
普通のdivタグですが「class」に注目です。
Animate.cssを使うためには「animated」クラスと「アニメーションの種類」クラスが必要です。
上記の例だと「bounce」というアニメーションの種類のクラスを指定しています。
この「bounce」を別のものに変更すると違うアニメーションを作ることができます。
簡単ですね！
アニメーションの種類はたくさんありますので、公式サイトとアニメーションクラスの種類を参考にしてください。
ただ、このままだと画面が表示された時に自動でアニメーションされてしまうので、あまり使い勝手が良くありません。
次に「ボタンがクリックされた時にアニメーション」「マウスオーバーされた時にアニメーション」も作ってみましょう！
サンプルも作りました。
ボタンがクリックされた時にアニメーション（Animate.css）
実現するためにはHTMLとスクリプトが必要となります。
簡単に説明すると「ボタンが押された時」に「アニメーションさせたい要素にスクリプトでクラスを追加する」という処理を作ります。
HTML側
|
1 2 3 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <div id="bounce-2">bounce</div> <button id="bounce-2-trigger">ボタン</button> |
[ 1行目 ]
jQueryを読み込んでおきます。
[ 2行目 ]
idを付けます。
注意点として「animated」クラスや「アニメーションの種類」クラスは付けないでおきます。
[ 3行目 ]
ボタンにもidを付けておきます。
スクリプト側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); return this; } }); $(function(){ // bounce2-triggerボタンがクリックされたら $("#bounce-2-trigger").click(function(){ $("#bounce-2").animateCss("bounce"); }); }); |
[ 1〜9行目 ]
「animateCss」という関数を定義しています。
内容は少し難しいので、理解できなくても問題ありません。
簡単に説明すると「対象の要素」に「animated」というクラスと「引数で渡されたクラスを」追加します。
そしてクラスの追加により発生したアニメーションが終了したタイミングで「追加したクラスを削除」します。
※クラスの削除をしておかないと、もう一度クリックした時にアニメーションしなくなります。
[ 12〜14行目 ]
ボタンがクリックされると、上記の「animateCss」関数を呼び出して「animated」と「bounce」クラスを追加します。
上記でボタンをクリックした時に指定のアニメーションを実行させることができます。
マウスオーバーされた時にアニメーション（Animate.css）
「ボタンがクリックされた時にアニメーション」とほとんど同じです。
HTML側
|
1 2 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <div id="bounce-3">bounce</div> |
スクリプト側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); return this; } }); $(function(){ // bounce3がマウスホバーされたら実行 $("#bounce-3").mouseover(function(){ $("#bounce-3").animateCss("bounce"); }); }); |
[ 12〜14行目 ]
ここだけが少しだけ違います。クリックでは無く「マウスオーバー」した時に実行されます。
比較的に簡単に実装できるので、機会があれば使ってみてください。
サンプルも作っています。
