Animate.cssとwow.jsで簡単にリッチなサイトを作る方法

2015.3.20 (金)
main_catch

先週に引き続き「Animate.css」を使った要素が動きまくりなwebの作成方法です。前回は「Animate.css」と「Ani.JS」を組み合わせることでアニメーションのトリガーを設定し「オンマウス時」や「クリック時」にアニメーションを発動させる方法をお伝えいたしましたが、今回は「Animate.css」と「wow.js」を組み合わせることによりアニメーションのトリガーを「スクロールが要素に達したら実行する」方法をご紹介していきます。

ちょっと言葉だけだと分かり難いので、まずはサンプルサイトをご覧になられて下さい。(※初回読み込み時はブラウザに要素が表示されるスピードより先にアニメーションしてしまうと思うので、一度更新されてみてください)順次ご説明いたしますが、サンプルサイトでは「単純にスクロールが要素に達した時」以外のトリガーも設定しているため少しオーソドックスな設定とは違いますのであしからず・・・。

「Animate.css」と「wow.js」をダウンロード~使用準備

それぞれ配布元から取得されて下さい。■Animate.cssはこちら■wow.jsはこちらから ダウンロードが完了したらヘッド内にそれぞれ読み込んで下さい。※ちなみにJQueryは使用しません。

<link rel=”stylesheet” type=”text/css” href=”css/animate.css”>
<script src=”js/wow.js”></script>

2ファイルの読み込みが完了したらwow.jsの為の記述を追加 ※外部jsでもヘッド内に記述でもどちらでもOKです。

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

アニメーションを設定したい要素にclass名を追加

スクロールがその要素に達した時にアニメーションを実行したい場合はクラス名に「wow」と「追加したいアニメーション名」を記述します。

<div class=”wow fadeInDown”>

これで編集完了です。このままの設定でも十分素敵なサイトが作成できるのですが、「wow.js」の力をフルに活用するとさらにステキなサイトが作成可能です。

「wow.js」のオプションを使いアニメーショントリガーの実行タイミングをずらす

サンプルサイトを見て頂くとすぐ分かると思うのですが、ファーストビューのロゴ・グローバルナビ・メインキャッチ上のテキストが時間差で表示→アニメーションしていると思います。

時間差表示をさせたい場合はwow.jsに用意されているオプションを利用します。

data-wow-duration アニメーション時間
data-wow-delay ロードからアニメーションのスタートのタイミング
data-wow-offset 画面に表示されてからどこまでの距離をスクロールしたらスタートするか
data-wow-iteration アニメーションの繰り返し回数

これを実際にマークアップすると

<!– 5秒後に2秒かけてゆっくり画面左からスライドイン –>
<div class=”wow slideInLeft” data-wow-duration=”2s” data-wow-delay=”5s”></div>
<!– スクロール10を過ぎたら右からのスライドインを10回繰り返す –>
<div class=”wow slideInRight” data-wow-offset=”10″ data-wow-iteration=”10″></div>

上記のようになります。前回の記事でも書きましたがこの組み合わせでパララックスなサイトを作ると面白いものが作れそうですね!!

ニワカソフトでは新しい技術への飽くなき探究心を切らしたことがありません!!お客さまにとって最善のアウトプットが出来るように日々精進しております。ホームページの新規立ち上げやリニューアル等ございましたら、ぜひご相談下さい!!