Webサイトを簡単に動きをつけて演出する方法（Animate.css）
最近は画面を表示するときにフワッと上品に表示されたり、フェードインしたりと動きがあるサイトが増えましたね。
そんな、アニメーション演出が簡単に実装できるのがAnimate.cssです。
アニメーションしたい要素にclassをつけるだけで、いろいろな種類の動きができます。
簡単なので、このAnimate.cssを使ってみましょう！
1.Animate.cssの使い方
まずは、Animate.css公式サイトからダウンロードし、< head >内に読み込みます。
<link rel="stylesheet" href="animate.css">
さあ！これで準備は完了です！
ええ、これだけです。
2.画面が表示されたときにアニメーションする
一番基本の使い方です。
動かしたい要素のclassに「animated」と動かし方のクラスネームを記述します。
<div class="animated bounce">Example</div>
どのクラスネームがどんな動き方をするかは公式ページで確認できます。
これだけだと、単純に画面が表示した時だけなので他にも色々と指定してみたいですね。
それでは、どんな指定ができるんでしょうか？
3.アニメーションの動き方等を指定する
classに記述してできること
クラスネームを追加することでできることです。
「infinite」アニメーションがループします。
「delay-2s」2秒、「delay-3s」3秒、「delay-4s」4秒、「delay-5s」5秒、1秒〜5秒指定の秒数でアニメーションします。
デフォルトは1秒です。ちなみに「slow」2秒、「slower」3秒、「fast」0.8秒、「faster」0.5秒という書き方もできます。
<div class="animated bounce infinite delay-2s">Example</div>
cssを記述してできること
独自でクラスネームを作成しcssを記述することで下記のようなコントロールができます。
/* アニメーションがループ */ -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; /* 2秒かけてアニメーション */ -webkit-animation-delay: 2s; animation-delay: 2s; /* 3回繰り返す */ -webkit-animation-iteration-count: 3; animation-iteration-count: 3; /* 3秒後アニメーション */ -webkit-animation-duration: 3s; animation-delay:3s;
4.動的にアニメーションをコントロールする
クリックしたときにアニメーションする
クリック等のイベントでアニメーションを実行する場合は、JQueryを読み込んでJavaScriptを記述します。
まずJQueryを読み込みますので< head >内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
そして下記のようにスクリプトを記述します。
<script>
$(function(){
$("#test1").on({
"click":function(){
$(this).addClass("animated bounce");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated bounce");
}
});
});
</script>
<a id="test1" class="" href="#" >Example</a>
id「test1」の要素をクリックしたときにaddClass()でclass内に「animated bounce」を記述しアニメーションさせます。
このままだと2回目以降は動かないので、アニメーションが終了したときのイベント「animationend」が発生したらremoveClass()を使用し「animated bounce」を削除させます。
スクロールして表示された時アニメーションする
画面をスクロールして表示した時にアニメーションさせるには、「wow.js」を利用します。
GitHubからwow.jsファイルをダウンロードし、< head >内にスクリプトを動かすためのコードと共に記述します。
<script src="wow.js"></script> <script> new WOW().init(); </script>
これで準備完了です。
後は、Animate.cssの基本の動かし方のように、動かしたい要素のclassに「wow」と動かし方のクラスネームを記述します。
<div class="wow bounce">Example</div>
これで画面をスクロールして表示した時にアニメーションします。
簡単ですね。
もうこれでアニメーション演出に関しては完璧ですね。