用CSS和jQuery来实现它,尽量看起来和原效果一样。
本教程里,我将使用CSS, HTML和jQuery来创建一个近似苹果电视视差效果,如果你正在阅读,我假设你对上述三种技术都有基本的了解。
废话不多说,开始第一部分。
<强> HTML页面
我们的页面结构像下面这样:
& lt; div类=昂１ā北?
& lt; div类=胺⒐狻弊４? lt;/div>
& lt; div类=巴疾?”祝辞& lt;/div>
& lt; div类=" 2层"祝辞& lt;/div>
& lt; div类="第三层"祝辞& lt;/div>
& lt; div类="第4层"祝辞& lt;/div>
& lt; div类="第五层"祝辞& lt;/div>
& lt;/div>
首先,需要一个样式类为. post的div,在这个div里包含5个其他样式的div层。在这五个层div上有一个发光div来添加一些闪光效果。
<强> CSS部分
首先,添加以下代码确保网页身体部分的高度是整个页面高度:
身体,html{高度:100%;最小高度:100%;}
再给身体部分一些背景渐变颜色:
身体{背景:线性渐变(到下,# f6f7fc 0%, # d5e1e8 40%);}
为了让. post有3 d旋转的效果,父容器需要设置透视和变换效果。如我们所见,div的父容器就身体是本身,所以添加以CSS下代码:
身体{
背景:线性渐变(到下,# f6f7fc 0%, # d5e1e8 40%);
传输格式:preserve-3d;
变换:角度(800 px);
}
之前
现在给卡片设置样式跟大小,让它在页面居中,添加一些圆角跟阴影效果:
. post {
宽度:320 px;
身高:500 px;
位置:绝对的;
上图:50%;左:50%;
保证金:-250 px 0 0 -160 px;
border - radius: 5 px;
不必:45 0 px 100 px rgba (0, 0, 0, 0.4);
溢出:隐藏;
}
为了让海报居中,需要设置位置的值为绝对:50%,左:50%,上部的边缘值是div高度的一半的负数,左边的边缘值是div宽度的一半的负数。需要记住的是. post的中心也是整个页面的中心。
<强>阴影效果
我们可以用以下的CSS选择器来选择所有的层:
div[类*='层- ']
。海报已经设计好了,来看看效果。
所以,CSS选择了所有类类名里含有“层”的div。
现在,设置所有的层的位置值是绝对的,平铺方式值为没有重演,背景位置为左上角,层背景的大小为100%宽度和自动高度。
div[类*="层- "){
位置:绝对的;
前:-10像素;左:-10 px;
右:-10 px;底部:-10 px;
汽车background-size: 100%;
平铺方式:不再重演;
背景位置:0 0;
过渡:0.1秒;
}
注意到,左,右,底部的值都是-10 px,目的是让层的大小比海报的大20 px,这样在各个层进行视察效果的时候就不会看到层的边缘部分了。
以下是给每个层添加背景:
.layer-1 {
背景图片:url (http://designmodo.com/demo/apple-tv-parallax/images/1.png);
}
.layer-2 {
背景图片:url (http://designmodo.com/demo/apple-tv-parallax/images/2.png);
}
.layer-3 {
上图:0;底部:0;
左:0;右:0;
背景图片:url (http://designmodo.com/demo/apple-tv-parallax/images/3.png);
}
.layer-4 {
背景图片:url (http://designmodo.com/demo/apple-tv-parallax/images/4.png);
}
.layer-5 {
背景图片:url (http://designmodo.com/demo/apple-tv-parallax/images/5.png);
}
在第三层部分,层不会移动,所以尺寸就不用太大了。
<强> JavaScript部分
在开始之前,请确保已经引入了jQuery库,否则会报错的。
视差效果的逻辑是这样的,每当鼠标移动的时候,根据光标的位置,。海报的转换:translateY、旋转、rotateY属性将会改变。光标距离页面左上角越远,动画的效果越明显。
公式就类似于这样的:offsetX=0.5 -光标距离页面顶端的位置/宽度。
为了每个元素的值都不一样,将给每一个光标公式返回的值乘以一个自定义的值,返回HTML的代码给每个会有动画的层元素添加data-offset=数字的属性。
