基于JQuery和CSS3 实现了仿苹果电视海报背景视觉差异特效的源代码共享

效果如下所示：

查看演示下载源代码

HTML结构

Apple TV是苹果继Airport Express之后推出的高清电视机顶盒产品。如果你以前用过，你会被酷炫电影海报糟糕的视觉效果所吸引。

视觉差异效果的HTML结构使用一个div作为容器，其中的每个div都是一个“层”。

div class=' poster ' div class=' shine '/div class=' layer-1 '/div class=' layer-2 '/div class=' layer-3 '/div div class=' layer-4 '/div div class=' layer-5 '/div/div . shine CSS样式

为了制造包装元件。海报产生3D旋转效果，其父元素需要设置透视和变换样式。

body { background:线性-渐变(到底部，#f6f7fc 0%，# d5e1 e 8 40%)；transform-style : preserve-3d；transform:透视(800 px)；}这里的海报设置为320x500像素的固定尺寸，相对以页面为中心，所以要为其做圆角和一些阴影效果。海报{ width: 320px高度： 500 px；绝对位置：top : 50%；左侧：50%；margin :-250 px 0 0-160 px；border-radius : 5px；box-shadow : 0 45px 100 px rgba(0，0，0，0.4)；飞越：隐藏；}海报以绝对定位居中：左侧和顶部分别为50%，然后将页边距-左侧和页边距-顶部的宽度和高度设置为负。

海报中的所有“层”都可以通过div[class*='layer-']选择器选择。所有图层设置为绝对定位，背景图像不重复，背景位置设置为左上角，背景大小设置为100%宽度和自动高度。

div[class *=' layer-']{ position : absolute；top :-10px；left :-10px；right :-10px；bottom :-10px；背景尺寸： 100%自动；背景-重复：不重复；背景-位置： 0 0；transition:0.1s}注意上面代码中的上、左、右、下属性都是-10像素。它们用于使图层的大小比海报的大小大20像素。之所以会这样，是因为在产生视觉差异效果的时候，可以隐藏图层的边缘。

最后，为每一层设置一个背景图片。layer-1 { background-image : URL(' images/1 . png ')；}.第2层{ background-image : URL(' images/2 . png ')；}.第3层{ top : 0；bottom : 0；left : 0；right : 0；background-image : URL(' images/3 . png ')；}.第4层{ background-image : URL(' images/4 . png ')；}.第5层{ background-image : URL(' images/5 . png ')；}JavaScript

这种视觉差异效果的原理是，每次用户移动鼠标时，都会转换的平移、旋转和旋转属性。海报会根据鼠标的位置而变化。鼠标离左上角越远，动画越明显。

公式类似于offset x=0.5鼠标位置/窗口宽度。

为了给每个层不同的动画速度，需要乘以一个自定义的动画速度值，该值由HTML标签上的data-offset='number '提供。

div data-offset='-2 ' class=' layer-1 '/div div class=' layer-2 '/div div data-offset=' layer-3 '/div div data-offset=' 3 ' class=' layer-4 '/div div data-offset=' 10 ' class=' layer-5 '/div data-offset的值越大，可见动画区域越大。

整个视觉差效果的JS代码如下：

var $海报=$('。海报)，$shine=$(' .shine ')，$ layer=$(' div[class *=' layer-']')；$(窗口)。打开('鼠标移动'，函数(e) { var w=$(窗口).width()，//窗口宽度h=$(窗口)。高度(),/窗口高度offsetX=0.5 - e.pageX/w，//鼠标X坐标偏移量=0.5 - e.pageY/h，//鼠标Y坐标dy=e.pageY - h/2，//@h/2=海报容器中心dx=e.pageX - w/2，//@w/2=海报容器中心=数学。atan 2(dy，dx)，//鼠标和海报中心的皇家舞蹈学院角度角度=* 180/数学PI - 90，//转换拉德为度数偏移海报=$海报。数据(' offset ')，变换海报=' translateY '(-offset x * offset海报' px)rotateX((-offset * offset海报)' deg)rotateY(' offset x *(offset海报* 2))' deg ')；//获取0-360 之间的角度if(角度0){ angle=角度360；}//渐变角度和不透明度$shine.css('背景','线性-渐变('角度'度，rgba(255，255，255，' e.pageY/h * .5 ') 0%，rgba(255，255，255，0)80%)')；//海报变换$poster.css('transform '，transform poster)；//视差foreach layer $layer。每个(function() { var $this=$(this)，offset layer=$ this。数据(' offset ')| | 0，transformLayer=' translateX '(offset x * offset layer ' px)translateY(' offset * offset layer ' px ')；$this.css('transform '，transformLayer)；});