JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery超炫图片3D背景视觉差特效插件

jQuery超炫图片3D背景视觉差特效插件

这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和3D空间中的图片做交互,在鼠标移动的过程中,各种图片形成很酷的视觉差效果。

查看演示    在线下载 201504262049.zip




安装


可以使用Bower来安装该插件。

  1. bower install logos-distort   
复制代码
使用方法

使用该jQuery图片视觉差特效插件首先要引入jQuery、jquery.logosDistort.min.js和perspectiveRules.css文件。

  1. <link href="assets/css/perspectiveRules.css" rel="stylesheet" />
  2. <script src="js/1.11.0/jquery.min.js"></script>
  3. <script src="assets/js/jquery.logosDistort.min.js"></script>   
复制代码
HTML结构

该特效的HTML结构使用一个<div>来包裹需要制作视觉差效果的图片。

  1. <div id="demo1">
  2.     <img alt="background" src="assets/images/background.png" />
  3.     <div id="particle-target" ></div>
  4.     <img alt="logo" src="assets/images/logo.png" />
  5. </div>        
复制代码
HTML结构中可以包含任何的HTML元素,目前该插件只支持可以全屏的元素。如果你想使用一个非全屏额元素来相应matrix transform,可以简单的将它放置到全屏元素之中。

调用插件

在页面加载完毕之后,可以通过下面的方法来初始化该图片视觉差插件。

  1. $("#demo1").logosDistort();
复制代码
配置参数

你可以在插件初始化的时候定制一些参数,下面是该视觉差插件的所有可用参数。

  1. enable: true,
  2. effectWeight: 1,
  3. enableSmoothing: true,
  4. smoothingMultiplier: 1,
  5. activeOnlyInside: false,
  6. outerBuffer: 1.10,
  7. elementDepth: 140,
  8. directions: [1, 1, 1, 1, -1, -1, 1, 1],
  9. weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200],
  10. container: window,
  11. cssClasses: {
  12.   smartContainer: "ld-smart-container",
  13.   overlapContainer: "ld-overlap-container",
  14.   parent3d: "ld-3d-parent",
  15.   transformTarget: "ld-transform-target",
  16.   active: "ld-transform-active",
  17.   object3d: "ld-3d-object"
  18. },
  19. onInit: function() {},
  20. onDestroy: function() {}     
复制代码
更多信息可以参考:https://github.com/hellsan631/LogosDistort

via:http://www.htmleaf.com/jQuery/shijuecha/201504261741.html

【jQuery超炫图片3D背景视觉差特效插件】相关文章

1. jQuery超炫图片3D背景视觉差特效插件

2. jQuery炫酷图片3d背景视觉差特效

3. jQuery网页背景视觉差滚动效果

4. jQuery基于图片的元素背景模糊特效插件

5. 基于Threejs的jQuery 3d图片旋转木马特效插件

6. CSS3系列教程:背景图片(背景大小和多背景图)

7. 15个款优秀的 jQuery 图片特效插件

8. 20个jQuery和CSS 的文本特效插件

9. [JQuery]ScrollMe滚动特效插件

10. 10款web前端优秀的jQuery特效插件

本文来源:https://www.51html5.com/a1524.html

点击展开全部

﹝jQuery超炫图片3D背景视觉差特效插件﹞相关内容

「jQuery超炫图片3D背景视觉差特效插件」相关专题

其它栏目

也许您还喜欢