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

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

安装

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

bower install logos-distort                
              

使用方法

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

<link href="assets/css/perspectiveRules.css" rel="stylesheet" />
<script src="js/1.11.0/jquery.min.js"></script>
<script src="assets/js/jquery.logosDistort.min.js"></script>                
              

HTML结构

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

<div id="demo1">
    <img alt="background" src="assets/images/background.png" />
    <div id="particle-target" ></div>
    <img alt="logo" src="assets/images/logo.png" />
</div>               
              

HTML结构中可以包含任何的HTML元素，目前该插件只支持可以全屏的元素。如果你想使用一个非全屏额元素来相应matrix transform，可以简单的将它放置到全屏元素之中。

调用插件

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

$("#demo1").logosDistort();             
              

配置参数

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

enable: true,
effectWeight: 1,
enableSmoothing: true,
smoothingMultiplier: 1,
activeOnlyInside: false,
outerBuffer: 1.10,
elementDepth: 140,
directions: [1, 1, 1, 1, -1, -1, 1, 1],
weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200],
container: window,
cssClasses: {
  smartContainer: "ld-smart-container",
  overlapContainer: "ld-overlap-container",
  parent3d: "ld-3d-parent",
  transformTarget: "ld-transform-target",
  active: "ld-transform-active",
  object3d: "ld-3d-object"
},
onInit: function() {},
onDestroy: function() {}