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

  • 源码大小:5.88KB
  • 所需积分:1积分
  • 源码编号:19JP-3416
  • 浏览次数:792次
  • 最后更新:2023年06月11日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

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>

...

预览截图