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”
で、表示スピードの調節ができます。