html动画3d背景图片,jQuery和CSS3全屏3D背景图片视觉差特效

这是一款使用jQuery和CSS3制作的超酷3D背景图片视觉差特效。该视觉差特效在左右晃动鼠标时，前景图片和背景图片之间就会产生动态的视觉差效果。非常有意思。

该视觉差特效采用CSS 3D Transforms来制作，它将图片沿Z轴方向排列，然后将鼠标当做3D相机，这样在移动鼠标的时候就能够产生3D透视效果。图片在3D空间中如何选择取决于鼠标的位置。

因为该视觉差效果依赖于鼠标，所以不适合在移动触摸设备上使用。

HTML结构

该视觉差效果的HTML结果使用一个

元素来包裹用于制作视觉差效果的图片。然后将它们都放到.cd-background-wrapper的包裹div中。

插件中的图片尺寸大小要相同。

CSS样式

为了制作3D空间Z轴方向上的视觉差效果，插件中将图片在Z轴上一张张的堆叠起来：第一张图片是static定位，其它图片采用absolute定位，然后为每张图片使用不同的translateZ值。

当以后移动鼠标滑过图片时，.cd-floating-background元素根据鼠标的位置沿X轴和Y轴旋转，由于元素有各自不同的translateZ值，因此它们会有各自不同的旋转动画。

为了制作这个特效，要确保元素都位于3D空间中：首先要为.cd-background-wrapper设置perspective值，这样会创建一个它和它的子元素共享的3D空间。然后为.cd-floating-background元素添加transform-style: preserve-3d属性，这样可以使它的子元素在空间中是3D的。

@media only screen and (min-width: 1024px) {

.cd-background-wrapper {

overflow: hidden;

perspective: 4000px;

}

.cd-floating-background {

transform-style: preserve-3d;

}

.cd-floating-background img:first-child {

transform: translateZ(50px);

}

.cd-floating-background img:nth-child(2) {

transform: translateZ(290px);

}

.cd-floating-background img:nth-child(3) {

transform: translateZ(400px);

}

关于IE浏览器：IE9浏览器不支持CSS3 3D Transforms属性，IE10+浏览器不支持transform-style: preserve-3d属性，所以这个视觉差特效在IE浏览器中是没有效果的。

JAVASCRIPT

该视觉差特效使用initBackground()方法来制作图片load事件：这个方法将

元素的位置属性从static改变为absolute。当该方法被调用的时候，.cd-background-wrapper元素被添加一个hight属性(由于它的子元素是static定位的，所以它的高度为0)，.cd-floating-background的尺寸属性同时也被改变。

.cd-background-wrapper上绑定了一个mousemove事件：鼠标的position由event.pageX和event.pageY来决定，并且相应的为.cd-floating-background设置rotateX和rotateY值。

注意：Modernizr 不会去检查浏览器是否支持preserve-3d。所以为了要知道浏览器是否支持它，插件中使用getPerspective函数来为添加preserve-3d或no-preserve-3d class来检测浏览器的支持。

html动画3d背景图片,jQuery和CSS3全屏3D背景图片视觉差特效相关推荐

3d视觉效果html,jQuery炫酷网页3D背景视觉差特效
这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件.该视觉差特效可以制作为全屏背景视觉差效果,也可以在一个容器中制作背景视觉差效果.当用户移动鼠标时,由于背景图片的移动速度不同,形成了3D ...
jQuery炫酷3d背景视觉差特效
Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件.该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果. 效果演示:http: ...
html页面飘落花瓣不是全屏,jQuery css3全屏花瓣飘落动画特效
特效描述:jQuery css3 全屏花瓣飘落动画特效.jQuery css3从上往下飘落爱心花瓣动画特效.(不兼容IE6,7,8) 代码结构 1. 引入JS 2. HTML代码 $(functio ...
基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="sli ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
html5弹窗全屏,jQuery炫酷全屏模态窗口插件
这是一款jQuery炫酷全屏模态窗口插件.该插件通过和animate.css结合使用,可以制作多种打开全屏模态窗口的炫酷过渡动画效果. 使用方法在页面中引入animate.min.css.jquer ...
Html手机web背景全屏,使用全屏背景的网页设计欣赏全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
CSS3全屏星空动态特效代码
CSS3全屏星空动态特效代码,可用于简约的星空表白页面,大气的文字内容动态背景特效. 更多源码下载:hereitis,在这里资源站,免费软件下载,PPT.图片素材下载,精品小工具小插件
网页（全屏）背景图实现方式（纯CSS向）
全屏背景的意思就是背景图占满整个浏览器视窗,在没有body其他内容的时候不出现滚动条.就算有滚动条的时候,背景也是固定的,不跟随滚动. 对于这类的全屏背景图片的实现,我们需要注意的是,有五种情况: 图 ...
HTML背景单张自动拉满全屏并且不重复怎么设置？
HTML背景单张自动拉满全屏并且不重复怎么设置? 很多小伙伴都被HTML因为像素不够导致全屏放了一堆的图片,那么,今天小编就来告诉你们如何设置图片不重复! 话不多说,直接上代码: <body c ...

html动画3d背景图片,jQuery和CSS3全屏3D背景图片视觉差特效

html动画3d背景图片,jQuery和CSS3全屏3D背景图片视觉差特效相关推荐

最新文章

热门文章