wow.jsとanimate.css
要素に動きをつけることができる「animate.css」と
「animate.css」を動かすタイミングを調節できる「wow.js」の組み合わせで
とっても簡単
head内で「animate.css」を読み込む
<link rel="stylesheet" href="css/animate.css">
bodyの閉じタグの前で「wow.jp」を読み込む
<script src="js/wow.js"></script>
スクリプトを記述
<script> new WOW().init(); </script>
あとはclass名を付けるだけ
↓こう記述すると↓
<div class="wow rollIn"> <p>こんな感じで</p> </div>
↓こうなる↓
こんな感じで
アニメーションのスピードなども設定できます。
- data-wow-duration
アニメーションのスピード - data-wow-delay
アニメーションを動かすまでの待ち時間 - data-wow-offset
アニメーションを動かすタイミング(ブラウザ下からの距離) - data-wow-iteration
アニメーションが繰り返される回数
詳しくはこちらで
Animate.css http://daneden.github.io/animate.css/