jQuery多层图片背景视觉差特效插件

jQuery多层图片背景视觉差特效插件

新媒体运营新媒体运营 11月前
0 152

这是一款jQuery多层图片背景视觉差特效插件。该视觉差插件可以创建多个透明图层，然后在鼠标移动时，使各个图层生成炫酷的背景视觉差效果。

使用方法
在页面中引入jquery.min.js、CZ-Parallax_jQuery-min.js文件。

1
2
<script  src="js/jquery.min.js"></script>        
<script  src="js/CZ-Parallax_jQuery-min.js"></script>

HTML结构
使用一个div元素作为容器。

1
2
3
<div id="test" style="width: 100vw; height: 100vh;">
  这里可以放置内容
</div>

初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Minimum setup with only required options
$('#some-element').CZParallax({
    fg: 'https://somewebsite.com/foreground-image.png',
    bgs: ['https://somewebsite.com/background-image.png']
});
 
// Setup with all options set
$('#some-element').CZParallax({
    fg: 'https://somewebsite.com/foreground-image.png',
    bgs: [
        'https://somewebsite.com/background-image.png',
        'https://somewebsite.com/background-image2.png',
        'https://somewebsite.com/background-image3.png'
    ],
    speed: 2.5,
    fgZoom: 1.1,
    bgZoom: 1.5,
    lock: 'x'
});

配置参数
该jQuery多层图片背景视觉差特效插件的可用配置参数有：

  • fg：前景图片，必须提供。
  • bgs：背景图片，至少提供一张，可以是一个数组。
  • speed：移动速度。前景和背景第一张图片以这个速度进行移动，其它的背景图层的移动速度在这个速度的基础上递减。
  • fgZoom：前景图片的缩放比例。
  • bgZoom：背景图片的缩放比例。
  • lock：将移动锁定在某个轴上。可选值为：'x' || 'X' || 'y' || 'Y'。

演示地址：

  1. 查看演示
当前内容只有登录了才能查看，如果您已经注册，请登录。
jQuery视觉特效(1)
♥赞1

相关下载

发表评论