图片/图形
超炫图片3D背景视觉差jQuery特效插件
PetitQ
这是一款效果非常炫的 jQuery 图片 3D 背景视觉差特效插件。该图片视觉差插件使用 CSS matrix3d transforms 来创建一个 3D 空间，使你能够使用鼠标和 3D 空间中的图片做交互，在鼠标移动的过程中，各种图片形成很酷的视觉差效果。
使用方法
使用该 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 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() {}
更多信息：https://github.com/hellsan631/LogosDistort
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录