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 相关资讯

Globalize 1.0 发布,jQuery 的国际化插件

jQuery 的国际化和本地话插件 Globalize 发布了 1.0 正式版本,该插件是 jQuery 官方的插件,品质当然是有保证的。 1.0 正式版本的详细介绍请看发行说明。

jQuery炫酷图片3d背景视觉差特效

jQuery炫酷图片3d背景视觉差特效

Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件。该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果。

jQuery轻量级补间动画工具库-jQueryTween

jQuery轻量级补间动画工具库-jQueryTween

jQueryTween是一款轻量级的jQuery补间动画工具库插件。使用jQueryTween可以制作出各种平滑的动画过渡效果。该插件基于tween.js,旨在简化各种补间动画操作,提供高性能的硬件加

15个实现粘性滚动的jquery插件

15个实现粘性滚动的jquery插件

打开网页时,当滚动页面的时候,页面中的某些元素会在一定的距内定住,滚出一定距离后又随着滚动退出视窗范围。这样的插件功能强大又简单操作。下面整理15个粘性不错的滚动jQuery

26款免费CSS3导航菜单及jQuery插件

26款免费CSS3导航菜单及jQuery插件

导航设计是一个网站最重要的元素。建设专业网站菜单给你的用户能带来良好的用户体验使用户能很方便找到自己需要看的东西。今天为大家收集26款免费CSS3导航菜单及jQuery插件

jQuery基于图片的元素背景模糊特效插件

jQuery基于图片的元素背景模糊特效插件

Blurr是一款基于图片的元素模糊背景特效jQuery插件。该插件根据图片的主要色彩,将元素的背景制作为这些色彩合成的模糊效果。色彩融合自然,有磨砂的效果,非常时尚好看。查看演

jQuery实用网页元素颜色修改插件

jQuery实用网页元素颜色修改插件

这是一款非常实用的可以在页面滚动或触发其它事件时修改网页元素的背景、前景和边框颜色的jQuery插件。该修改颜色jQuery插件支持各种鼠标事件和页面滚动事件,可以在这些事件

jQuery超酷轻量级响应式lightbox插件

jQuery超酷轻量级响应式lightbox插件

Smoothbox是一款非常实用的超酷jQuery轻量级响应式lightbox插件。该lightbox插件在图片转换时带有平滑的CSS3过渡效果。如果不使用CSS3过渡效果,该插件可以支持到IE8浏览器。

带幻灯片效果的全屏背景jQuery插件:Vegas2

带幻灯片效果的全屏背景jQuery插件:Vegas2

今天为大家分享一个网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显

jQuery简单且功能强大的图片剪裁插件

jQuery简单且功能强大的图片剪裁插件

cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。 查看演示 下载

更多 jquery特效 相关资讯

jQuery炫酷图片3d背景视觉差特效

jQuery炫酷图片3d背景视觉差特效

Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件。该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果。

jQuery基于图片的元素背景模糊特效插件

jQuery基于图片的元素背景模糊特效插件

Blurr是一款基于图片的元素模糊背景特效jQuery插件。该插件根据图片的主要色彩,将元素的背景制作为这些色彩合成的模糊效果。色彩融合自然,有磨砂的效果,非常时尚好看。查看演

舒适的全屏式的弹窗jQuery插件 – animatedModal.js

舒适的全屏式的弹窗jQuery插件 – animatedModal.js

animatedModal.js 是一个全屏式的弹窗jQuery插件,而且弹出效果很漂亮,全屏的弹窗特别适用于移动手机网站,所以做响应式网页的设计师们可以尝试使用这款插件。 an

jQuery图片列表拖拽排序布局插件

jQuery图片列表拖拽排序布局插件

春节马上过去了,小编也立马切换到工作状态,继续为大家分享一些实用和炫酷的jQuery插件以及HTML5经典特效。本文要介绍的是一款基于jQuery的图片列表拖拽排序布局插件,我

jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

之前我们已经向大家分享过很多基于jQuery和CSS3的3D焦点图动画插件,比如jQuery带爆炸特效的焦点图动画和HTML5全屏3D图片展示特效,今天要分享的这款jQuery 3D焦点图动

用CSS和jQuery打造3D窗帘切换特效

用CSS和jQuery打造3D窗帘切换特效

今天为大家分享一套用CSS和jQuery打造3D窗帘切换特效,它是通过两个分裂的模块组成再通过CSS转换和jQuery帮助Z轴运动并降低上一张图片的透明度造成一种空间的感觉。还

jQuery图片分组分页插件

jQuery图片分组分页插件

今天我们要继续为大家分享实用的jQuery分页插件,它用来将很多图片进行分组和分页,并可以方便用户按页来浏览图片缩略图。另外这个jQuery图片分页插件还有一个特点是每次

jQuery图片放大预览插件

jQuery图片放大预览插件

之前我们分享过一个基于jQuery的放大镜特效插件,可以将选中的图片区域进行放大预览。今天我们要来分享一款基于jQuery的图片放大预览插件,只需要将鼠标滑过缩略图,即可将当前区

jQuery带爆炸特效的焦点图动画

jQuery带爆炸特效的焦点图动画

我们分享过一款可以鼠标滑动jQuery焦点图插件,效果相当不错。这次要带来的也是一款jQuery焦点图插件,它的特点是当图片切换时,图片会发生爆炸的动画特效,非常有创意,也是一款很不

一款基于jQuery的图片场景标注提示弹窗特效

一款基于jQuery的图片场景标注提示弹窗特效

今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗

更多 3d 相关资讯

jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

之前我们已经向大家分享过很多基于jQuery和CSS3的3D焦点图动画插件,比如jQuery带爆炸特效的焦点图动画和HTML5全屏3D图片展示特效,今天要分享的这款jQuery 3D焦点图动

用CSS和jQuery打造3D窗帘切换特效

用CSS和jQuery打造3D窗帘切换特效

今天为大家分享一套用CSS和jQuery打造3D窗帘切换特效,它是通过两个分裂的模块组成再通过CSS转换和jQuery帮助Z轴运动并降低上一张图片的透明度造成一种空间的感觉。还

使用 jQuery & CSS3 实现 3D 图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现

分享Jquery+CSS3实现的3D下拉菜单特效

分享Jquery+CSS3实现的3D下拉菜单特效

此Jquery特效是一款Jquery+CSS3实现3D下拉菜单特效,效果非常棒,由于使用了CSS3的3D效果,所以大家在演示的时候请使用支持CSS3的浏览器(谷歌、火狐等)查看。 页面初始化代

Jquery实现添加3D特效到你的幻灯片

Jquery实现添加3D特效到你的幻灯片

  此Jquery特效是一款效果非常棒的幻灯片作品,实现带有3D效果的功能,默认自带了3个Demo例子,分别为3种不同的特效。   1、带有左右滚动控制按钮和状态小图标   2、只