すてきなアニメーション効果を追加できるjsライブラリ_WOW.js

すてきなアニメーション効果を追加できるjsライブラリ_WOW.js

WOW.js

cssだけでも面白いアニメーションは追加できますが、
「もうちょっとダイナミックさが欲しい!」
と欲が出てきた頃にこちら。WOW.js。
animate.cssと連携するとさらにワクワクなものが実装出来ます。

★ダウンロードとデモはこちら
http://mynameismatthieu.com/WOW/

使い方

外部ファイルを読み込む

jQuery、animate.css、wow.jsを読み込みます。
ディレクトリは利用環境に合わせて変えてください。

Java Script

Java Scriptを記述します。

HTML

適用したい要素にcssのクラス名「.wow」を加えます。

そして、animate.cssのエフェクトを加えます。(ここでは.bounceInUp)

これでその要素が表示された時に、アニメーションがスタートします。

オプション

data属性を使い、アニメーションスタートのタイミングや持続時間を設定することも可能です。

data-wow-duration
アニメーションの持続時間
data-wow-delay
アニメーションをスタートする時の遅延時間
data-wow-offset
アニメーションをスタートする距離(ブラウザの下から)
data-wow-iteration
アニメーションが繰り返される数

こちらの記事を参考にさせていただきました。
[JS]デモがめちゃ楽しい!jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js(コリス)

Back to Top