wow.jsの使い方とアニメーションサンプル集

スクロールしたタイミングでCSS3のアニメーションを実行してくれるwow.jsを使ってみました。
アニメーションにCSS3を使用しているので、IE9以下は対応していないようです。
レイアウトは崩れないので、アニメーションはおまけとして割り切れる案件で使えそうです。
主な設定方法は以下の通りです。

■配布元
wow.js

サンプルページ

読み込むCSS

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

読み込むJS

<script src="dist/wow.js"></script>
<script>
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset:0// アニメーションをスタートさせる距離
}
);
wow.init();
</script>

アニメーションさせる要素にクラス名を追加する

アニメーションさせたい要素に wow、animated と、アニメーションに応じたクラス名を追加します。

<div class="wow animated fadeInUp ">アニメーションさせたい要素</div>

オプション設定一覧

以下の値を変更することで、表示タイミングやアニメーションを繰り返す回数を調整できます。

アニメーションの種類やクラス名は、以下のサンプルをご参考ください。

サンプルページ