メニュー

パララックスとは、背景のコンテンツや本ケースではイメージが、スクロール時に前景のコンテンツとは異なる速度で移動する効果です。デモをチェックしてより詳しく知ることが可能です。

デモを開く 

    <div class="parallax-container">
      <div class="parallax"><img src="images/parallax1.jpg"></div>
    </div>

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax();
  });

オプション

名前 タイプ 初期値 説明
responsibeThreshold 数値 0 パララックス機能が開始するピクセル単位の最小画面の幅。

メソッド

jQueryが依存関係ではなくなったため、すべてのメソッドはプラグインインスタンスで呼び出されます。次のようにしてプラグインインスタンスを取得できます


  var instance = M.Parallax.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.parallax').parallax('methodName');
    $('.parallax').parallax('methodName', paramName);
  */
.destroy();

プラグインインスタンスを破棄し、削除します


instance.destroy();

プロパティ

名前 タイプ 説明
el 要素 プラグインが初期化されたDOMエレメント。
options オブジェクト インスタンスが初期化されたオプション。

パララックスカスタマイズ

パララックのコンテナの高さは、表示できる画像の量を定義します。この初期値は500pxです。独自のスタイルを追加してこれをオーバーライドできます。


    .parallax-container {
      height: "your height here";
    }