BLOG

wow.jsとanimate.cssを使ってスクロールに合わせてアニメーションする

このサイトでは、「inview」っていうjQueryのプラグインを使って、スクロールに合わせて要素がフワッと出てくるようにしているんだけど、「wow.js」でも同じようなことが出来て、しかもこっちのほうが実装が簡単っぽいので、いつか使うだろうし試してみた。

デモページも作った。下のボタンから。

wow.jsの使い方

1.ファイルをダウンロードする

「wow.js」を実装するには、「wow.js」本体と、「animate.css」が必要。
下記のリンクからダウンロード。

2.ファイルを読み込む

ダウンロードした「animate.css」と「wow.js」を読み込む。パスは環境に合わせて変更。
あ、「wow.js」はjQuery不要です。


<link rel="stylesheet" href="animate.css">
<script src="wow.min.js"></script>

「wow.js」を動かすためのスクリプトを書く。


<script>
new WOW().init();
</script>

モバイルで無効にしたい時はこう。


<script>
new WOW({ mobile: false }).init();
</script>

3.アニメーションさせたい要素にClassを追加

クラス名「wow」と、追加したいアニメーション名を書く。例えばこんな感じ。


<div class="wow rotateIn">クルッと回る</div>

アニメーションの種類は「Animate.css」のページで確認できる。

4.オプション設定

4つのオプションを指定できる。

data-wow-durationアニメーションの時間
data-wow-delayアニメーションのタイミング
data-wow-offsetアニメーションのスタート位置
data-wow-iterationアニメーションを繰り返す回数

こんな感じで指定する。


<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="3s">3秒後に1秒かけてフェードイン</div>

RELATED POSTS