Diurnal Parallax是一个超轻的jQuery插件，它可以简单地在向下/向上滚动页面时对背景图像应用微妙的视差滚动效果。

如何使用它:

1.在文档末尾包含对jQuery库和Diurnal Parallax插件的引用。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.diurnal.min.js"></script>

2.使用数据视差图像属性：

<section class="parallax-bg" data-parallax-image="bg-1.jpg">
  Parallax Container 1
</section>
 
<section class="parallax-bg" data-parallax-image="bg-2.jpg">
  Parallax Container 2
</section>
 
<section class="parallax-bg" data-parallax-image="bg-3.jpg">
  Parallax Container 3
</section>
 
...

3.调用函数d视差（）在视差容器上，插件将完成其余工作。

$(function(){
  $('.parallax-bg').dParallax();
});

4.使用数据视差速度属性默认值：15。

<section class="parallax-bg" data-parallax-speed="50" data-parallax-image="bg-1.jpg">
  Parallax Container 1
</section>
 
<section class="parallax-bg" data-parallax-speed="10" data-parallax-image="bg-2.jpg">
  Parallax Container 2
</section>
 
<section class="parallax-bg" data-parallax-speed="60" data-parallax-image="bg-3.jpg">
  Parallax Container 3
</section>
 
...

预览截图

微小背景视差滚动效果插件 昼夜视差