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

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

使用方法

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

HTML结构

使用一个

元素作为容器。

这里可以放置内容

初始化插件

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

// 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'。