Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。
そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介5回目です。
今回はパララックス（視差効果）の実装について。
＊Material Design for Bootstrap3
前回記事「アニメーション実装」の応用編です。
～ 目次 ～
- 「wow.js」を使用
- パララックスの実装手順
- デモページで確認
- 動作をカスタマイズする
- モバイル端末のみパララックスを動作させない
「wow.js」を使用
MDB3でのパララックスの実装は「wow.js」を用います。
通常「wow.js」は「Animate.css」とセットで使用しますが、
＊「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう
MDB3の場合は「wow.js」単体で機能します。
パララックスの実装手順
では、実装手順の解説です。
HTMLに以下のJSコードを記述します。
場所はbodyの閉じタグ前がいいでしょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script> new WOW().init(); </script>
これで「wow.js」が導入できます。
次に、パララックスで動かしたい要素に、class「wow」とアニメーションの種類をclassで付与します。
アニメーションの種類は前回記事を参照されてください。
実装例1
<p class="wow swing">あいうえお</p>
実装例2
<img src="images/xxx.png" class="wow fadeIn">
動かす要素はｐでもdivでもimgでも何でも有りです。
たいていの要素は動かせます（インライン要素は不可）。
デモページで確認
では、実際の動作をデモページで確認してみましょう
ページをスクロールして、要素の位置まで来るとパララックスが発動します。
再度動かしたい場合は、ページを再読込してください。
動作をカスタマイズする
パララックスの動作を細かくカスタマイズすることも可能です。
以下のdata属性を使います。
| data-wow-duration | アニメーションの長さ（時間） | 例：5s |
|---|---|---|
| data-wow-delay | スクロールが要素に達してからアニメーションがスタートする時間 | 例：5s |
| data-wow-offset | スクロールが要素に達してからアニメーションがスタートする距離 | 例：10 |
| data-wow-iteration | アニメーションが繰り返される回数 | 例：infinite（ループ） |
実装例3
<p class="wow swing" data-wow-duration="5s" data-wow-delay="2s">かきくけこ</p>
実装例4
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="infinite">さしすせそ</div>
実際の挙動はデモページで確認されてください。
モバイル端末のみパララックスを動作させない
スマホやタブレットではパララックスを動かしたくない場合があります。
モバイル端末でパララックスはかえってウザいですからね。
JSのコードを以下のように変更します。
<script> new WOW({ mobile: false }).init(); </script>
この場合、モバイル端末か否かは、画面幅ではなくてユーザーエージェントで判断しているようです。
