ちょっとした演出に便利なAnimate.cssの使い方

近年サイトの演出もリッチになり、自分もよくCSSやJavaScriptで演出を作りますが、正直めんどくさい…。
昔はちょっとしたフェードイン・フェードアウトなんかも作ってましたが、最近は「Animate.css」を使って簡単なものは対応しています。

公式サイトを見るとプルダウンにサンプルがあり、簡単なものから自分で作ると手間なものまで比較的によく使われる演出が一式揃っているので、そのまま使うもよし!モックアップに使うもよし!と便利なAnimate.cssの使い方を紹介します。

Animate.cssの準備

準備と言っても公式サイトにある「Download Animate.css」からCSSをダウンロードして、通常のCSS同様HTMLにlinkタグで設定するだけです。

これで完了!
次に使い方を説明します。

Animate.cssの使い方

使い方と言っても要は使いたい演出のclassを該当の要素に付けるだけなので、まずはデモを見てください。

class部分に「animated」、「bounce」、「infinite」がありますが、
「animated」はanimate.cssを使うのに必須のclassになっているおまじないみたいなものです。
「bounce」は名前のとおりバウンドアニメーションですが、他にもさまざまなアニメーションが用意されています。
「infinite」は無限ループさせたい場合につけます。
※他のclassを知りたい方はこちらのGitHubに記載されています。

jQueryと組み合わせて使う

デモのようなループして使う場合はあまり使わないかもしれませんが、jQueryと組み合わせ使うことももちろん可能です。
上のデモをちょろっと弄って「Animate」をクリック度に上下からバウンドして表示するように変更しました。

jQuery側でやってることは、「bounceInUp」があるかの判定をして条件によって以下のような処理をします。

■「bounceInUp」がある場合

■「bounceInUp」がない場合

クリックするたびに「bounceInUp」と「bounceInDown」を交互に着脱してる感じです。
また、繰り返して同じアニメーションをさせたい場合は、oneメソッドを使うなど一度付与したclassを取り除く必要があるので注意してください。

さいごに

今回はクリックイベントですが、他にもよく見かけるスクロールに応じて表示させたりなどjQueryと組み合わせるとアニメーションの幅が広がりますよ!