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

By U, 2017年3月23日

http://mynameismatthieu.com/WOW/

百聞は一見に如かず。
ぜひリンク先をご覧いただきたい。
楽しいアニメーションが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”
で、表示スピードの調節ができます。