株式会社イーナ

メニュー

技術ブログ 2015.05.18

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
アニメーションが繰り返される数

一覧へ戻る