ページスクロールに応じてアニメーションさせるプラグインは、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回アニメーションして（一旦）停止する
たったこれだけで、素敵なアニメーションが実装できますので、ぜひ挑戦してみてください。
