jQuery超炫图片3D背景视觉差特效插件
这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和3D空间中的图片做交互,在鼠标移动的过程中,各种图片形成很酷的视觉差效果。
使用方法
使用该jQuery图片视觉差特效插件首先要引入jQuery、jquery.logosDistort.min.js和perspectiveRules.css文件。
HTML结构
该特效的HTML结构使用一个<div>来包裹需要制作视觉差效果的图片。
HTML结构中可以包含任何的HTML元素,目前该插件只支持可以全屏的元素。如果你想使用一个非全屏额元素来相应matrix transform,可以简单的将它放置到全屏元素之中。
调用插件
在页面加载完毕之后,可以通过下面的方法来初始化该图片视觉差插件。
配置参数
你可以在插件初始化的时候定制一些参数,下面是该视觉差插件的所有可用参数。
更多信息可以参考:https://github.com/hellsan631/LogosDistort
via:http://www.htmleaf.com/jQuery/shijuecha/201504261741.html
查看演示 在线下载 201504262049.zip
安装
可以使用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() {}
更多信息可以参考:https://github.com/hellsan631/LogosDistort
via:http://www.htmleaf.com/jQuery/shijuecha/201504261741.html
【jQuery超炫图片3D背景视觉差特效插件】相关文章
5. 基于Threejs的jQuery 3d图片旋转木马特效插件
本文来源:https://www.51html5.com/a1524.html
﹝jQuery超炫图片3D背景视觉差特效插件﹞相关内容
- jQuery超酷轻量级响应式lightbox插件
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
- Jquery实现超炫的弹出层特效
- Javascript视差特效引擎 - Parallax.js
- Javascript视差特效引擎: Parallax.js
- CSS3边框背景-边框背景(-border-image)
- 3D视觉盛宴:Cube 基于google地图的HTML5云游戏
- jquery全屏背景插件bgStretcher
- 5款让人跃跃欲试的 jQuery 超炫插件