CSS3アニメーションが可愛い！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 と、アニメーションに応じたクラス名を追加します。

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

アニメーションの設定

data-wow-duration アニメーションを継続させる時間。長く設定するとゆっくりアニメーションされる。
data-wow-delay アニメーションの開始タイミング。
data-wow-offset アニメーションをスタートさせる位置。
data-wow-iteration アニメーションを繰り返す回数。

RELATED POSTS