ページスクロールに応じてアニメーションさせるプラグインは、WOW.jsが有名です。
しかし、WOW.jsは商用利用が有料という最大の欠点があります。
WOW.jsは、Animate.cssに依存したプラグインですが、同じくAnimate.cssを利用するものに、Scrollaがあります。

公式サイト（ダウンロード/デモ）

Scrollaの使い方は、WOW.jsとほとんど同じでとても簡単。

まずは、3つのファイルを読み込みます。

animate.min.cssは、こちらの公式サイトからダウンロードしてください。

関数の呼び出しは先の3ファイル読み込み後であれば、HTMLに直接記述しても、別ファイルでも大丈夫です。

あとは、HTMLのアニメーションさせたい要素に以下のように記述するだけです。

animate div

カスタムデータ属性を使って以下の要素が調整可能です。

• data-animate
  アニメーションの種類
  どんなアニメーションの種類があるかはanimate.cssで確認しながら感覚的に実装可能です。
• data-duration
  アニメーションが実行される時間の長さ
  上記の場合1秒かけてアニメーションする
• data-delay
  アニメーションが開始されるまでの待ち時間
  上記の場合0.5秒後からアニメーションが開始される
• data-offset
  アニメーションが開始されるまでのスクロール距離
  data-offset=”300″の場合、本来の実行座標から300px分スクロールされた段階でアニメーションが開始される。スクロールの上下は問わない
• data-iteration
  アニメーションの繰り返し回数
  通常は1回で終わるアニメーションを繰り返したいときに使用する
  data-iteration=”3″の場合は3回アニメーションして（一旦）停止する

たったこれだけで、素敵なアニメーションが実装できますので、ぜひ挑戦してみてください。

TAG / HTML, jQuery