图片/图形

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

面包多

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

使用方法

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

也想出现在这里?联系我们
WordPress 主题
  1. <script  src="js/jquery.min.js"></script>        
  2. <script  src="js/CZ-Parallax_jQuery-min.js"></script>

HTML 结构

使用一个

元素作为容器。

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

初始化插件

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

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

配置参数

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

fg:前景图片,必须提供

bgs:背景图片,至少提供一张,可以是一个数组

speed:移动速度。前景和背景第一张图片以这个速度进行移动,其它的背景图层的移动速度在这个速度的基础上递减

fgZoom:前景图片的缩放比例

bgZoom:背景图片的缩放比例

lock:将移动锁定在某个轴上。可选值为:'x' || 'X' || 'y' || 'Y'
Github 网址:https://github.com/masicmirza/CZ-Parallax

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!