cssとjsを利用して簡単アニメーションの実装
animate.cssとwow.jsを利用すると、こんな感じのアニメーションを簡単に実装することができます。しかもclass名を変えるだけで動きを変更することができるので使い方は超簡単です。
目次
1. 準備
animate.cssファイルのダウンロード
wow.jsファイルのダウンロード
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を指定。
2. 使い方
使い方は簡単！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 |
細かい動きはこちらのサイトで試してみてください。
