BLOG
ブログ
jQuery要らず！wow.jsとanimate.cssで簡単に動きのあるサイトを！
近年は、サイトに動きを付けるサイトがすっかり多くなってきましたね。
個人的には
・テンプレートサイト「Halsyon Dayz」
http://tympanus.net/Freebies/HalcyonDaysTemplate/
上記のテンプレートサイトが特にお気に入りです。
こんな高品質なものが画像からソースからセットで無料でダウンロードできるなんてなんて素晴らしい時代でしょうか。
このテンプレートサイトの動きが好きでソースをばらしていたら、wow.jsとanimate.cssなるものを使用していることがわかりました。
ググッてみた所、それぞれ役割があるようでして
・animate.css
クラスを指定してやるだけで簡単にCSS3による動きを付ける
・wow.js
ユーザーのスクロールを感知してアニメーションを開始する仕組み
なんと素晴らしい連携プレイでしょうか。
wow.jsのデモ、ダウンロードはこちらから
http://mynameismatthieu.com/WOW/
アニメーションのタイミング、持続時間、回数、位置などの設定も可能です！
animate.cssの各クラスごとの動作確認・ダウンロードはこちらから
http://daneden.github.io/animate.css/
実装方法について
head内にanimate.css及びwow.jsを記述します
これはいつも通り。
<head> <link rel="stylesheet" href="animate.css"> </head> <body> <script src="wow.js"></script> </body>
スクリプトを設定してください
<script> new WOW().init(); </script>
適用する要素に「.wow」を指定します。
<div class="wow">アニメーションさせたいコンテンツ</div >
最後にanimate.cssのクラスを指定して完了！
<div class="wow bounceInUp">アニメーションさせるコンテンツ</div >
ちなみにdata属性でオプションも用意されています。
data-wow-duration
アニメーションの持続時間
data-wow-delay
アニメーションをスタートする時の遅延時間
data-wow-offset
アニメーションをスタートする距離（ブラウザの下から）
data-wow-iteration
アニメーションが繰り返される数
0120-764-068
0120-764-068