一个功能丰富但易于实现的jQuery动画插件，它将微妙的视差滚动效果应用于背景图像，并在向下滚动页面时为视差容器的子元素设置动画。

请参阅实际操作：

参见：

• 10个最佳视差滚动效果
• 10个最佳滚动触发的JavaScript动画插件

如何使用它:

1.在文档中加载所需的JavaScript和CSS文件。

<link href="/path/to/jquery.parallax.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>

2.使用数据bg属性：

<div data-bg="bg.jpg">
  ...
</div>

3.自定义速率。默认值：0.3。

<div data-bg="bg.jpg" 
     data-rate="0.5">
     ...
</div>

4.使用数据效应属性。所有可能的动画类型：

• 向上滑动
• 向下滑动
• 向右滑动
• 向左滑动
• 翻转-x
• 翻转式
• 缩放

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-effect="flip-x">
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
</div>

5.初始化插件并完成。

$('body').parallax();

6.将自定义显示动画应用于元素。

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-func="custom_show">
     ...
</div>

6.将自定义显示动画应用于元素。

function custom_show(obj, mode) {
  obj.children().addClass('animation animation_'+mode);
}

更新日志：

2022-11-23

• JS更新

预览截图

jQuery中 视差滚动效果和滚动动画