jQuery多层图片背景视觉差特效插件
上传滚动 2年前
0 5.24K 9
这是一款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'。
演示地址:
当前内容只有登录了才能查看,如果您已经注册,请登录。