ほぼcssのみでアニメーションするライブラリが愛おしい

百聞は一見に如かず。
ぜひリンク先をご覧いただきたい。
楽しいアニメーションが1つのライブラリでcssのみで制御できるという素晴らしいもの。

HOW TOの方に分かりやすく解説してあるので、そちらをご覧いただくほうが本当に早い。
http://mynameismatthieu.com/WOW/docs.html

headにスタイルを読み込む

<link rel="stylesheet" href="css/animate.css">

ライブラリを読み込む

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

これでセットアップは完了。

<div class="wow"></div>

wowがライブラリを使う宣言になっているのでjsに設定する必要はないです。
あとはお好みで、

<div class="wow bounceInUp">ほげー</div>

としてあげれば、ぼよーんと跳ねるアニメーションが！

超かんたんですね。
先ほどのサイトのトップページがライブラリ一覧になるので、この動き使いたい！
と思ったらコンソールを覗いてみて下さい。
細かいカスタマイズもできるので、JSマスターの方はカスタマイズに挑戦してみても良いかと思います。

【おまけ】
data-wow-delay=”0.5s”
で、表示スピードの調節ができます。