视差滚动



介绍

视差滚动是一种当滚动条滚动时,页面的背景内容或者图片的滚动速度跟前景滚动速度不同。看下面的演示。

演示

Parallax HTML结构


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

初始化


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

自定义

Parallax容器的高度定义了图片能被看到的高度.默认情况下是500px,当然你可以自定义。


  .parallax-container {
    height: "500px";
  }