スクロールしていくと横から下からコンテンツが表示されていくページが作成できます。
『wow.js』と『Animate.css』の導入
まずは、以下のサイトから『wow.js』と『Animate.css』をダウンロードします。
『Animate.css』
また、Animate.cssはCDN版もありますので、そちらをご利用の場合は以下のリンクから
『wow.js』
こちらもCDN版があります。そちらをご利用の場合は以下のリンクから
『wow.js』と『Animate.css』のつかい方
1. 先ほどダウンロードしたファイルをサーバへアップ（もしくは、CDNのリンクをコピーしておく）
2. ヘッダに『Animate.css』を読み込む。
|
1 2 3 4 5 |
//ダウンロードし、サーバにアップした場合 <link rel="stylesheet" href="css/animate.css"> //CDNの場合 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"> |
3. body直前に『wow.js』を読み込む。
|
1 2 3 4 5 |
//ダウンロードし、サーバにアップした場合 <script src="js/wow.min.js"></script> //CDNの場合 <script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"></script> |
4. 読み込んだ『wow.js』の下に以下を記載する。
|
1 2 3 |
<script> new WOW().init(); </script> |
5. 準備が整ったので、次にアニメーションさせたい箇所にwowとアニメーションの種類を記載します。
|
1 2 3 |
<section class="wow bounceInUp"> <p>Content to Reveal Here</p> </section> |
これで基本設定は完了です。
『wow.js』のオプション
以下の4つのオプションが用意されています。
| オプション | 概要 |
|---|---|
| data-wow-duration | 指定した秒数をかけて表示させる。 |
| data-wow-delay | 指定した秒数遅らせて表示させる。 |
| data-wow-offset | 指定した数字のぶんだけアニメーションさせる。 |
| data-wow-iteration | アニメーションを開始する距離の指定。 |
つかい方は、例えば3秒後に、2秒かけて表示させる場合次のようになります。
|
1 2 3 |
//3秒後に2秒の時間をかけて表示 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="3s"> </section> |
『wow.js』のカスタマイズ
カスタマイズは以下の5つ。
- boxClass
- animateClass
- offset
- mobile
- live
デフォルトは以下のようになっています。
|
1 2 3 4 5 6 7 8 9 10 |
wow = new WOW( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // default mobile: true, // default live: true // default } ) wow.init(); |
モバイルで動作させないようにするには、mobileをfalseにしてあげればOK！
以下にちょっとしたデモをつくってみました。
たくさん使いすぎてしまうと目が追いつかない感じもしますが、トップページで注目させたいコンテンツに使ってみたいですね。
