菜单

视差是一种效果，在这种情况下，背景内容或图像在滚动时以不同于前景内容的速度移动。查看演示以更好地了解它。

打开演示 

    <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();
  });

选项

名称 类型 默认值 描述
responsiveThreshold 数字 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";
    }