Webサイトを簡単に動きをつけて演出する方法（Animate.css）

最近は画面を表示するときにフワッと上品に表示されたり、フェードインしたりと動きがあるサイトが増えましたね。
そんな、アニメーション演出が簡単に実装できるのがAnimate.cssです。
アニメーションしたい要素にclassをつけるだけで、いろいろな種類の動きができます。
簡単なので、このAnimate.cssを使ってみましょう！

1.Animate.cssの使い方

まずは、Animate.css公式サイトからダウンロードし、< head >内に読み込みます。

Animate.css公式サイト

さあ！これで準備は完了です！
ええ、これだけです。

2.画面が表示されたときにアニメーションする

一番基本の使い方です。
動かしたい要素のclassに「animated」と動かし方のクラスネームを記述します。

どのクラスネームがどんな動き方をするかは公式ページで確認できます。

これだけだと、単純に画面が表示した時だけなので他にも色々と指定してみたいですね。
それでは、どんな指定ができるんでしょうか？

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秒という書き方もできます。

cssを記述してできること

独自でクラスネームを作成しcssを記述することで下記のようなコントロールができます。

4.動的にアニメーションをコントロールする

クリックしたときにアニメーションする

クリック等のイベントでアニメーションを実行する場合は、JQueryを読み込んでJavaScriptを記述します。
まずJQueryを読み込みますので< head >内に記述します。

そして下記のようにスクリプトを記述します。

id「test1」の要素をクリックしたときにaddClass()でclass内に「animated bounce」を記述しアニメーションさせます。
このままだと2回目以降は動かないので、アニメーションが終了したときのイベント「animationend」が発生したらremoveClass()を使用し「animated bounce」を削除させます。

スクロールして表示された時アニメーションする

画面をスクロールして表示した時にアニメーションさせるには、「wow.js」を利用します。
GitHubからwow.jsファイルをダウンロードし、< head >内にスクリプトを動かすためのコードと共に記述します。

GitHub

これで準備完了です。
後は、Animate.cssの基本の動かし方のように、動かしたい要素のclassに「wow」と動かし方のクラスネームを記述します。

これで画面をスクロールして表示した時にアニメーションします。
簡単ですね。

もうこれでアニメーション演出に関しては完璧ですね。