最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか？

今日紹介する［wow.js］も、jQuery要らずで実装可能な優良スクリプト。
容量も8KBと軽量で、別途配布されている「Animate.css」との組み合わせで様々なアニメーション効果を付与することができます。

アニメーションが開始されるスイッチはウィンドウのスクロールに依存しており、いくつかのオプションを設定することでタイミングやアニメーションの持続時間、繰り返される回数などを指定できます。

実際に［wow.js］を使ったサンプルサイトを用意しましたので、まずはコチラをご覧ください。

wow.js：サンプルサイト

画面をスクロールさせると、それに合わせてコンテンツがアニメーションするのが確認できます。

jQueryを使わずに済むこともあり、導入はいたって簡単です。

必要なファイルをダウンロードする

［wow.js］の利用には、メインとなるスクリプト本体ファイルの「wow.js」以外に、スタイルシートの「animate.css」が必要です。
それぞれを以下のサイトからダウンロードしてきましょう。

取得したファイルを読み込む

以下のコードを参考に、ダウンロードしてきた２つのファイルをhtmlファイルに読み込ませます。

<link rel="stylesheet" href="animate.css">
<script src="js/wow.min.js"></script>

さらに、［wow.js］を起動させるための初期設定が必要なので、以下のコードも記述しておく必要があります。

<script>
new WOW().init();
</script>

繋げて書くと以下のようになります。

<link rel="stylesheet" href="animate.css">
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>

記述する場所は<head>〜</head>内が適切でしょう。

アニメーション処理を施したい要素を定義する

最後に、動作させたい要素に特定のクラス名を付与します。 

<div class="wow fadeInUp">アニメーションさせたい要素</div>

アニメーションの種類は「animate.css」に依存しており、「fadeInRight」「fadeInUpBig」「flipOutX」「rotateInUpLeft」などなど、様々な動きの中から好きなものを指定して使うことができます。
このとき、クラス名に「wow」を付けておくことも忘れないように。

オプション設定

HTML5から導入されたカスタムデータ属性を使って、以下、４つのオプションを指定することが可能です。

data-wow-duration
アニメーションを継続させる時間。長く設定するとゆっくりアニメーションされる。
data-wow-delay
アニメーションの開始タイミング。
data-wow-offset
アニメーションをスタートさせる位置。
data-wow-iteration
アニメーションを繰り返す回数。

公式サイトのデモは以下より。

http://mynameismatthieu.com/WOW/

MATTHIEU AUSSAGUEL

商用での利用は有料になるのでご注意を。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん