スクロールしたタイミングで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 | アニメーションを繰り返す回数。 |