这是一款使用jQuery和CSS3制作的超酷3D多层图片视觉差互动特效。该特效中使用嵌套div结构来制作2个不同的图片层,在用户移动鼠标时,两个图层会相应的3D旋转,形成视觉差效果。
使用方法
HTML结构
该视觉差特效的HTML结构如下:
<div class="container"> <div class="moving-zone"> <div class="popup"> <img class="margin" src="img/1.jpg" width="100%"> <div class="moving-zone-2"> <div class="popup-2"> <img src="img/2.png" width="120%"> </div> </div> </div> </div> </div>
CSS样式
该视觉差特效的CSS样式非常简单。整个容器设置为50%视口宽度,并居中显示。.moving-zone
是透视层,用于制作3D透视空间。.popup
和.popup-2
分别是2个图片层。
.container { width: 50%; margin: 40px auto; } .moving-zone { position: relative; width:85%; height:985%; margin: auto; perspective: 800px; } .popup { padding: 10px; box-sizing: border-box; cursor: pointer; transform-style: preserve-3d; } .popup-2 { position: absolute; padding: 10px; box-sizing: border-box; cursor: pointer; transform-style: preserve-3d; left:20%; top:0% !important; transform: translateZ(100px) !important; } .popup-2 img { overflow: hidden; }
JavaScript
该视觉差特效使用jQuery代码来计算鼠标的位置,并根据鼠标的位置来相应的改变.popup
和.popup-2
的旋转角度。
var moveForce = 30; var rotateForce = 20; $(document).mousemove(function(e) { var docX = $(document).width(); var docY = $(document).height(); var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce; var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce; var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce; var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce); $('.popup') .css('left', moveX+'px') .css('top', moveY+'px') .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)'); $('.popup-2') .css('right', moveX+'px') .css('bottom', moveY+'px') .css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)'); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!