Material Design for Bootstrap3(その5)パララックスの実装

Material Design for Bootstrap3(その5)パララックスの実装

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">

動かす要素はpでも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>

この場合、モバイル端末か否かは、画面幅ではなくてユーザーエージェントで判断しているようです。

 

ken
アニメーション単体よりも、パララックスのほうが実用性がありそうですね。

 

関連記事

Material Design for Bootstrap3(その8)フォームの実装

2017.05.29

Material Design for Bootstrap3(その7)各種エフェクトの実装

2017.05.23

Material Design for Bootstrap3(その6)スライドショーの実装

2017.05.15

Material Design for Bootstrap3(その4)アニメーションの実装

2017.05.05

Material Design for Bootstrap3(その3)ボタンの実装

2017.04.25

Material Design for Bootstrap3(その2)シャドウとホバーエフェクトの実装

2017.02.28

Material Design for Bootstrap3(その1)導入とカードデザインの実装

2017.02.16

マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2016.11.17