所属分类：鼠标滑过
jQuery和CSS3 3D海报背景视觉差特效。该视觉差特效在使用鼠标在屏幕上下左右移动的时候，海报中的各种元素就会以不同的速度运动，形成视觉差效果，并且还带有一些流光特效。
该Apple TV背景视觉差的基本HTML结构如下：其中.light和.light-2是流光层。余下的3个层是背景图片层
1 2 3 4 5 6 7 8 9 | <div class="wrapper"> <div class="ad"> <div class="layer light"></div> <div class="layer light light-2"></div> <div class="layer layer-1"></div> <div class="layer layer-2"></div> <div class="layer layer-3"></div> </div></div> |
包裹容器.wrapper设置了固定的高度，定位方式为相对定位，并且设置透视度perspective为800，使其转换为3D空间
1 2 3 4 5 6 | .wrapper { position: relative; height: 800px; -webkit-perspective: 800; perspective: 800;} |
所有的图层.layer元素都采用绝对定位，并使用will-change属性告诉浏览器对即将执行的transform进行优化。
1 2 3 4 | .layer { position: absolute; will-change: transform;} |
视觉差容器.container使用绝对定位，相对于包裹容器居中。overflow属性设置为hidden，同时设置圆角和阴影效果。并使用transform-style: preserve-3d;来使所有子元素在3D空间中展现。由于IE不支持该属性，所以在IE中没有3D效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .container { position: absolute; left: 50%; top: 50%; width: 840px; height: 500px; margin-left: -420px; margin-top: -250px; background: black; overflow: hidden; border-radius: 3px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5);} |
3个背景图层同样居中定位，使用transform属性将其缩小0.7倍。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .layer-1,.layer-2,.layer-3 { top: 50%; left: 50%; margin-left: -630px; margin-top: -375px; width: 1260px; height: 750px; -webkit-transform: scale(0.7); transform: scale(0.7);}.layer-1 { background-image: url(../img/1.jpg);}.layer-2 { background-image: url(../img/2.png);}.layer-3 { background-image: url(../img/3.png);} |
流光层也居中定位，使用椭圆渐变作为背景，并设置背景混合模式mix-blend-mode为color-dodge模式。并分别为各个层设置背景图像。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .light { top: 50%; left: 50%; margin-left: -840px; margin-top: -800px; width: 1680px; height: 1000px; background: -webkit-radial-gradient(ellipse closest-side at center, #6c6c6c, #000000); background: radial-gradient(ellipse closest-side at center, #6c6c6c, #000000); mix-blend-mode: color-dodge; opacity: .6; z-index: 3;}.light-2 { z-index: 4; background: -webkit-radial-gradient(ellipse closest-side at center, #ffffff, #000000); background: radial-gradient(ellipse closest-side at center, #ffffff, #000000); mix-blend-mode: screen; opacity: .3;} |
该视觉差特效使用jQuery代码来处理鼠标移动时为各个图层应用不同的CSS transform属性，来达到视觉差效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var $body = $('body');var WIDTH = $body.width();var HEIGHT = $body.height();var $ad = $('.container');var $light = $ad.find('.light');var $layer1 = $ad.find('.layer-1');var $layer2 = $ad.find('.layer-2');var $layer3 = $ad.find('.layer-3');function moveAd(e) { var xPer = e.clientX / WIDTH; var yPer = e.clientY / HEIGHT; var rotateX = 5 - (yPer * 10); var rotateY = -5 + (xPer * 10); $ad.css({ transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) ' }); var translateX = -5 + (xPer * 10); var translateY = -5 + (yPer * 10); $layer2.css({ transform: 'scale(.7) translateX(' + translateX + 'px) translateY(' + translateY + 'px)' }); $layer3.css({ transform: 'scale(.7) translateX(' + (translateX * 2) + 'px) translateY(' + (translateY * 2) + 'px)' }); var lightX = 800 - (xPer * 1600); var lightY = 300 - (yPer * 600); $light.css({ transform: 'translateX(' + lightX + 'px) translateY(' + lightY + 'px)' });}$body.on('mousemove', moveAd); |
微博登录
QQ登录