2015/12/01  CSS 

  

animate.csswow.jsを利用すると、こんな感じのアニメーションを簡単に実装することができます。しかもclass名を変えるだけで動きを変更することができるので使い方は超簡単です。

1、準備

(1) animate.cssファイルのダウンロード

公式サイト
GitHub

(2) wow.jsファイルのダウンロード

GitHub

2、設定

(1) ファイルの読み込み

animate.css

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

※または圧縮版animate.min.cssを読み込み

wow.js

<script src="wow.js"></script>

※または圧縮版wow.min.jsを読み込み

(2) wow.jsのinitメソッドの呼び出し

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

モバイルで動かしたくない場合

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

mobile: falseを指定。

3、使い方

使い方は簡単!classにwowとアニメーションcssを指定するだけ。
例えばbounceを使うとこんな感じに動きます。

あいうえお
<div class="wow bounce">あいうえお</div>

その他にもオプションでアニメーションの時間や回数など指定することができます。
上記例はdata-wow-iteration="5"を指定してあります。アニメーションを5回繰り返し。

オプション 意味 設定例
data-wow-duration アニメーションの時間。
ゆっくり動かすか早く動かすか調整できます。
2s
data-wow-delay スクロールが要素に達してからアニメーションがスタートする時間。
複数要素ずらして動かしたい時、時間を少しずつずらせば効果的です。
0.5s
data-wow-offset スクロールが要素に達してからアニメーションがスタートする距離 10
data-wow-iteration アニメーションの繰り返し回数 5

細かい動きはこちらのサイトで試してみてください。

公式サイト

animate.css