全国免费咨询热线:400-611-9921
 
视“差”滚动浅析

2015-10-10

863

视差滚动,这一技术最早出现是在Nike better World,之后这一网页技术在这些年频繁的出现在人们的视线当中,网络上关于视差滚动的教程和插件已经是多如牛毛, 不胜枚举。 比如:30个让人兴奋的视差滚动、10个关于视差滚动的插件和教程、35个运用视差滚动效果的网站设计等等…


96990b84b7f13e528388ee359214b6b8

视差滚动,这一技术最早出现是在 Nike better World,之后这一网页技术在这些年频繁的出现在人们的视线当中,网络上关于视差滚动的教程和插件已经是多如牛毛, 不胜枚举。 比如:30个让人兴奋的视差滚动、10个关于视差滚动的插件和教程、35个运用视差滚动效果的网站设计等等…

1) 那到底什么是视差滚动呢?

2) 它的实现原理是什么呢?

3) 什么场景我们需要用到视差滚动呢?

4) 有什么工具能帮助我们快速实现视差滚动效果呢?

带着这些疑问,我们来一探究竟吧! 视差滚动是怎样一个概念呢? 首先我们还是先来了解一下什么是视差,维基百科的解释是这样的:

视“差”滚动浅析

视差,就是从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角,叫做这两个点的视差,两点之间的距离称作基线。只要知道视差角度和基线长度,就可以计算出目标和观测者之间的距离。视差可用观测者的两个不同位置之间的距离(基线)在天体处的张角来表示。 可以从图中看到,随着观测点从一测移至另一侧,路边的河水和花草让人感觉远处的大山出现缓慢移动。 既然理解了视差,我们可以进一步来看下面这张图:

视“差”滚动浅析

在图中,我们可以看到,虽然多个建筑只是在按照自己的速度进行轨迹运动,但是在视觉上却行成一种新的体验,在web设计中,通过运用多层背景在以不同速度运动的情况下,形成的一种立体的运动效果,这种视觉体验,我们称之为视差效果。 那么在Web上是如何实现视差滚动的呢? 虽然网络上那些优秀的视差滚动效果层出不穷,但其实也都是基于一些最基础的视差动画制作而来的,所以我们可以先从一个简单的小例子来分析:

我们来看这样一个例子吧:

这个页面有五个画面,然后通过浏览器窗口将整个页面分割成多个场景。 经过分析以后,其实我们可以很轻松的实现这样的效果,我们可以通过五个画面来组成这样一个页面,代码如下:

视“差”滚动浅析

然后我们给这五个容器设置相应的背景,让页面变的丰富起来,并将背景图片相对于浏览器窗口固定,样式文件如下:

视“差”滚动浅析

为了能更接近实例,我给所有页面设置了一个统一高度,这个高度相对于页面容器总是要少10%,为了就是能更贴近实际效果。

当我们滚动这个页面的时候,可以看到图片出现了简单的切换效果,只是通过给背景设置 background-attachment:fixed;这样一个css属性,便实现了一个简单的视差效果。虽然它现在看起来还很简陋。

那么我们还是先来了解一下,background-attachment到底是一个怎样的属性呢?我们来看看官方文档的解释:

background-attachment –属性设置背景图像是否固定或者随着页面的其余部分滚动。 取值有: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll

我们为什么要给当前页面中每个容器设置background-attachment:fixed呢?其实我们可以这样理解这个属性:当前每个容器的背景是不会因为滚动轴的滚动而移动的,但是滚动的同时,该容器还是会因为滚动轴的滚动而移动,所以就产生了上面的类似转场动画效果。

经过测试除了IE6以外都是可以支持background-attachment这个属性的,当然IE6并不是不支持,只是支持的标签有限,仅仅支持body和html的标签。

我们来看看下面的视图说明就不难明白了。 视“差”滚动浅析

因为我们始终能看到的区域是浏览器窗口,当我们上下滚动的时候,就形成这样的视觉感受了。

不过,好像还差点什么,没错,每个场景中,都有相应的页面元素比如,文字,图片按照自己的方式滚动,下面我们来看看页面的源码:

视“差”滚动浅析

我们可以看到页面中分别为这几个元素都添加了data-type类型,data-speed速度,background-position属性,随着滚动轴滚动,background-position的值发生相应的改变。 data-type=”background”和data-speed=”8″分别是定义一个数据类型和 当前元素的速度取值,用来向JS里传递参数,background-position则是用来定义背景的位置;

我们还可以看一下页面的js:

作者大体的意思是这样的: 通过遍历带有data-type的元素,读取相应元素的位置和滚动速度,找到相应的data-type=”background”,存储当前的基础变量,然后当窗口滚动时,先通过计算滚动条高度和窗口高度判断当前元素是否在视野中,从而改变相应的元素的值。简单点说,页面的js是通过监听scroll事件来实现的。

这个例子,虽然简单,只是用js反向滚动背景,就达到了视差滚动的效果,看上去还不错。 许多优秀的视差滚动也都是通过多层的背景,按不同的速度,不同的方向,不同的效果去运动从而配合实现的。

原理我们已经知道了,那什么情况我们需要用到视差滚动呢? 个人觉得:首先视差滚动是通过大量的背景和元素组成,也就意味着需要大量的背景图片,通过高分辨率的大图,吸引用户浏览,让用户的视线停留在背景上,当然我们需要考虑页面的加载情况,所以不少视差滚动页面会提前添加loading动画。

其次,需要设计好各个图层中元素和背景的关系,通过好的设计来传达视觉效果,不要让页面变的花哨无趣,最好给页面一个叙事感,通过页面的元素,能够传达一个有趣的故事等。要注意的是,内容真的很重要,技术只是手段。 



关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:广州网站建设,广州网页设计,广州网站设计,广州网站建设公司,广州网页设计公司,广州网站设计公司,移动网站建设,高端网站建设
热门标签
柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭