用CSS和jQuery实现，尽量看起来和原来的效果一样。

在本教程中，我将使用CSS、HTML和jQuery创建一个类似苹果电视的视差效果。如果你正在阅读，我假设你对以上三种技术有基本的了解。

二话没说，开始第一部分。

网页

我们的页面结构如下：

div class=' poster ' Div class=' shine '/Div class=' layer-1 '/Div class=' layer-2 '/Div class=' layer-3 '/Div class=' layer-4 '/Div class=' layer-5 '/Div/Div首先，您需要一个样式类为的Div。海报，包含其他风格的五层草皮。在五层草皮上有一个发光分区来增加一些闪光效果。

CSS部分

首先，添加以下代码，以确保网页正文部分的高度是整个页面的高度：

正文，html { height : 100%；最小高度：100%；}给身体部分一些背景渐变颜色：

body { background:线性-渐变(到底部，#f6f7fc 0%，# d5e1 e 8 40%)；}为了制造。海报有3D旋转效果，父容器需要设置透视和变换效果。我们可以看到，div的父容器是body本身，所以添加以下CSS代码：

body { background:线性-渐变(到底部，#f6f7fc 0%，# d5e1 e 8 40%)；transform-style : preserve-3d；transform:透视(800 px)；}现在设置卡片的样式和大小，使其在页面上居中，并添加一些圆角和阴影效果：海报{ 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)；飞越：隐藏；}为了使海报居中，您需要将位置值设置为绝对，top:50%，' left:50% '，上边距值为div高度的负一半，左边距值为div宽度的负一半。记住。海报也是整个页面的中心。

阴影效应

我们可以使用以下CSS选择器来选择所有层：

Div[class *='layer-']。海报已经设计好了，我们来看看效果。

因此，CSS在所有类名中都选择了带有“layer-”的div。

现在，将所有图层的位置值设置为绝对，背景-重复值设置为不重复，背景-位置设置为左上角，图层背景的大小设置为100%宽度和自动高度。

div[class *=' layer-']{ position : absolute；top :-10px；left :-10px；right :-10px；bottom :-10px；背景尺寸： 100%自动；背景-重复：不重复；背景-位置： 0 0；transition:0.1s}注意上、左、右、下的值都是-10px，这样图层的大小比海报大20px，这样每检查一层就看不到图层的边缘了。

以下是为每个层添加背景：layer-1 { background-image : URL(' http://design modo.com/demo/apple-TV-parallax/images/1 . png ')；}.第2层{ background-image : URL(' http://design modo.com/demo/apple-TV-parallax/images/2 . png ')；}.第3层{ top : 0；bottom : 0；left : 0；right : 0；background-image : URL(' http://designmodo.com/demo/apple-TV-parallax/images/3 . png ')；}.第4层{ background-image : URL(' http://design modo.com/demo/apple-TV-parallels/images/4 . png ')；}.第5层{ background-image : URL(' http://design modo.com/demo/apple-TV-parallax/images/5 . png ')；}在layer-3部分，图层不会移动，所以大小不会太大。

完成静态效果

JavaScript部分

在开始之前，请确保已经引入了jQuery库，否则您将报告一个错误。

视差效果的逻辑如下：每次鼠标移动，变换：平移、旋转、旋转属性。海报会根据光标位置而变化。光标离页面左上角越远，动画效果越明显。

公式如下：offsetX=0.5-光标距离页面顶部的位置/宽度。

为了使每个元素的值不同，将每个光标公式返回的值乘以用户定义的值，并返回HTML代码，将data-offset=number的属性添加到每个动画层元素中。

Div data-offset=' 15 ' class=' poster ' Div class=' shine '/Div 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/Div各自的规则。图层是相同的，但是我们将它们应用到translateXY

data-offset属性的值越大，动画效果越明显，因此可以更改这些值来体验它。

为了代码可读性，我们分配。JavaScript中的海报到$海报变量，shine to $shine变量，$layer变量代表所有层，w和h代表页面宽度和高度。

var $海报=$('。海报')，$shine=$('。shine ')，$ layer=$(' div[class *=' layer-']')；现在，我们需要考虑光标移动时获取光标位置的问题。我们可以使用$(window)的mousemove事件，它将返回一个包含我们需要的位置信息和其他我们还不需要的变量的JavaScript对象。

$(窗口)。on('mousemove '，函数(e){ var w=e . current target . inner width，h=e . current target . inner height；var offsetX=0.5 - e.pageX/w，/*其中e.pageX是我们的光标X坐标*/offset=0.5-e . pagey/h，offset poster=$ poster . data(' offset ')，/*动画深度的自定义值*/translate=' translateY '(-offset X * offset poster ' px)rotateex((-offset * offset poster)' deg)rotateY(' offset X *(offset poster * 2))' deg ')；/*将transform应用于$ poster */$ poster . CSS(' transform '，transform poster)；/*视差foreach layer *//* loop思想每层*//*获取自定义视差值*//*应用变换*/$ layer . each(function(){ var $ this=$(this)；var offset layer=$ this . data(' offset ')| | 0；/*获取自定义视差值，如果元素描述符有数据偏移，那么它的0 */var transformLayer=' translateX(' offsetX * offsetLayer ' px)translateY(' offsetY * offsetLayer ' px ')；$this.css('transform '，transformLayer)；});});下一步是用上面解释的公式计算offset和offsetX的值，然后将视差效果应用到。posert和每一个海报层。

非常酷，现在我们有了一个具有视差效果的小部件。

基本完成

但还没有结束。海报上光鲜亮丽的部分还没有定下来

现在回到CSS部分，定位。绝对闪耀div，添加渐变颜色效果，将z-index属性值设置为100，使其位于所有图层之上。shine { position: absolutetop : 0；left : 0；right : 0；bottom : 0；背景技术：线性梯度(90度，rgba(255，255，255， 5) 0%，rgba(255，255，255，0)60%)；z-index : 100；}海报上已经有了一个漂亮的闪光层，但是为了达到更逼真的效果，光照应该会随着光标的移动而变化。

更现实

我们该怎么办？也许你还记得初三那堂无聊的数学课。当你认为你在学习一些你从未用过的公式时，我们现在就使用它们。

因此，倾斜角度应该等于光标与海报中心形成三角形的角度的相反值。(记住，海报的中心是整个页面的中心，是页面宽度和高度的一半)

角图法

首先，找到光标与页面中心形成的三角形的直角边，将光标与中心连接后，做一个直角三角形。

然后用Math.atan2()函数得到中心点的角度值。请注意，这个函数的返回值是用弧度表示的，所以我们必须在CSS中将其转换为角度度数，并使用以下公式：

弧度值*180/pi=角度值

var $海报=$('。海报');var $shine=$(' .闪耀');var $ layer=$(' div[class *=' layer-']')；$poster.data('offset '，15)；$(窗口)。打开('鼠标移动'，函数(e){ var w=e .当前目标。内部宽度，h=e。当前目标。内部高度；var offsetX=0.5 - e.pageX/w，/*其中e.pageX是我们的光标X坐标*/offset=0.5-e . pagey/h，offset poster=$ poster。数据('偏移量')，/*动画深度的自定义值*/translate=' translateY '(-offset X * offset poster ' px)rotateex((-offset * offset poster)' deg)rotateY(' offset X *(offset poster * 2))' deg ')；dy=e.pageY - h/2，dx=e.pageX - w/2，theta=Math.atan2(dy，dx)，/*获取以弧度为单位的角度*/角度=* 180/数学.PI；/*以度为单位转换rad *//*将转换应用于$海报*/$海报。CSS('变换'，变换海报)；/*视差foreach层*//*循环思想每层*//*获取自定义视差值*//*应用变换*/$层。每个(function(){ var $ this=$(this)；var偏移层=$ this。数据('偏移量')| | 0；/*获取自定义视差值，如果元素描述符有数据偏移，那么它的0 */var transformLayer=' translateX(' offsetX * offsetLayer ' px)translateY(' offsetY * offsetLayer ' px ')；$this.css('transform '，transformLayer)；});});你会发现角度值的范围是从-180到180度，以下代码修复这个问题让角度值从0-360度：

如果(角度0) { angle=角度360 ;}现在角度有了，就可以随着光标的移动来动态改变渐变颜色的角度值：

$shine.css('背景','线性-渐变'((角度- 90)'度，rgba(255，255，255，' e.pageY/h ') 0%，rgba(255，255，255，0)80%)')；以上所述是小编给大家介绍的基于jQuery和CSS3实现苹果电视海报视差效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！