图片/图形
CSS3炫酷3D图片视觉差jQuery特效
PetitQ
这是一款使用 jQuery 和 CSS3 制作的效果非常炫酷的 3D 图片视觉差特效。该视觉差特效模拟放风筝效果，以 9 只小鸟的图片作为风筝。这个界面可以随鼠标左右倾斜，8 个风筝也会以不同的速度进行运动，组成强烈的 3D 视觉差效果。
HTML 结构
该视觉差效果的所有 HTML 元素都是通过 js 代码动态添加到<body>元素中。
也想出现在这里？联系我们吧
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src='js/Sprite3D.js'></script>
CSS 样式
该视觉差特效的 CSS 样式非常简单，只是简单的在 CSS 中设置了各个元素的背景图像。
body,html{
width: 100%;
height: 100%;
overflow: hidden;
background: black;
}#bg1{
background: url(img/bg1.jpg) center center;
background-size: contain;
}#bg2{
background: url(img/bg2.png) no-repeat;
background-size: contain;
}#cage{background: url(img/cage.png);}
#man{background: url(img/man.png);}
#bird1{background: url(img/bird1.png);}
#bird2{background: url(img/bird2.png);}
#bird3{background: url(img/bird3.png);}
#bird4{ background: url(img/bird4.png);}
#bird5{background: url(img/bird5.png);}
#bird6{background: url(img/bird6.png);}
#bird7{background: url(img/bird7.png);}
#bird8{background: url(img/bird8.png);}
#bird9{background: url(img/bird9.png);}
JAVASCRIPT
该插件依赖于 Sprite3D.js 插件，它可以制作出立方体效果。在 js 代码中，在 init()方法中，首先制作了一个立方体容器。
container = Sprite3D.stage().appendChild(Sprite3D.box( 0, 0, 0, "cube" ));
然后往这个立方体容器中添加需要的 HTML DOM 元素。同时设置各个元素的尺寸和 transform 原点。
bg1 = container.appendChild(Sprite3D.create("bg1").size(ww,wh).y(-wh/2).x(-ww/2).z(0).update());
bg2 = container.appendChild(Sprite3D.create("bg2").size(ww/1.2,ww/12.17).y(wh/2-ww/11).x(-ww/2.4).z(60).update());
cage = container.appendChild(Sprite3D.create("cage").size(617,679).y(-309).x(-340).z(30).update());
man = container.appendChild(Sprite3D.create("man").size(617,679).y(-309).x(-340).z(80).update());
bird1 = container.appendChild(Sprite3D.create("bird1").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird2 = container.appendChild(Sprite3D.create("bird2").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird3 = container.appendChild(Sprite3D.create("bird3").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).update());
bird4 = container.appendChild(Sprite3D.create("bird4").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird5 = container.appendChild(Sprite3D.create("bird5").size(617,679).y(-309).x(-330).z(80).transformOrigin(157,395).rotationX(30).update());
bird6 = container.appendChild(Sprite3D.create("bird6").size(617,679).y(-309).x(-330).z(80).transformOrigin(414,368).update());
bird7 = container.appendChild(Sprite3D.create("bird7").size(617,679).y(-309).x(-330).z(80).transformOrigin(417,374).update());
bird8 = container.appendChild(Sprite3D.create("bird8").size(617,679).y(-309).x(-330).z(80).transformOrigin(419,372).update());
bird9 = container.appendChild(Sprite3D.create("bird9").size(617,679).y(-309).x(-340).z(80).transformOrigin(425,374).update());
接着为 body 添加 mousemove 事件监听，以根据鼠标的位置来旋转整个界面。
$("body").mousemove(function move(e){
x = e.clientX;
y = e.clientY;
if(x<ww/2){
x = Math.abs(x-ww/2);
container.rotationY(-x/90).update();
}if(x>ww/2){
x = x-ww/2;
container.rotationY(x/90).update();
}if(y<wh/2){
y = Math.abs(y-wh/2);
container.rotationX(y/80).update();
}if(y>wh/2){
y = y-wh/2;
container.rotationX(-y/80).update();
}});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
