Show Design Lab|ホームページ制作に関するトータルコンサルティングをご提供します。

ページスクロールで発火するアニメーションScrollaを実装する

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

公式サイト(ダウンロード/デモ)

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

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




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

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


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

animate div

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

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

モバイルバージョンを終了