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


这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和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