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/

Wow.js　http://mynameismatthieu.com/WOW/