ウェブページにcssとjsを利用してアニメーション実装

  

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

1、準備

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

公式サイト
GitHub

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

GitHub

2、設定

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

animate.css

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

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

wow.js

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

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

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

1
2
3
<script>
    new WOW().init();
</script>

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

1
2
3
<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

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

公式サイト


0

新着記事 さらに見る