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