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

2019-10-09 08:44:55 作者: 大梦 浏览: 7 [百度未收录] [搜狗已收录] [360已收录]

简要教程
这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和3D空间中的图片做交互,在鼠标移动的过程中,各种图片形成很酷的视觉差效果。
 安装
可以使用Bower来安装该插件。
bower install logos-distort                
 使用方法
使用该jQuery图片视觉差特效插件首先要引入jQuery、jquery.logosDistort.min.js和perspectiveRules.css文件。


                
 HTML结构
该特效的HTML结构使用一个
来包裹需要制作视觉差效果的图片。
background
logo
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

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的