这是一款使用jQuery和CSS3制作的效果非常炫酷的3D图片视觉差特效。该视觉差特效模拟放风筝效果,以9只小鸟的图片作为风筝。这个界面可以随鼠标左右倾斜,8个风筝也会以不同的速度进行运动,组成强烈的3D视觉差效果。
制作方法
HTML结构
该视觉差效果的所有HTML元素都是通过js代码动态添加到<body>
元素中。
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(); } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!