乌徒帮技术范技术中心HTML代码 › 视差滚动效果初见

视差滚动效果初见

分类:HTML代码

在《40个视差滚动效果网站的新技术应用》一文中推荐了一些运用视差滚动效果的网站,本文来初浅的谈谈视差滚动效果的实现。

什么是视差滚动?

视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。

我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。

一些谈到视差滚动技术或教程的网页

http://www.jb51.net/article/17840.htm?不用javascript就实现

http://www.cnblogs.com/haner/archive/2011/12/7.html?javascript实现的基本思路

http://www.iteye.com/news/24593?10个插件或教程

谈谈我的基本思路

如果理解了视差造成的原因:移动的速度不同,那么我们的思路也就很清晰:网页元素在滚动的时候位移速度或方向不同。

第一步:布置HTML

...
<body>
<div id="cavas"></div>
<div id="scroll"></div>
</body>
...

第二步:css布置

我们可以有两种移动思路,第一种是元素本身发生位移,第二种是背景图片发生位移。什么意思呢?我们先用第一种,元素本身发生位移:

#cavas{
position:fixed;
top:20;
left:40;
width:400px;
height:200px;
background:url(bg.jpg) no-repeat center;
}

#scroll{省略}

position值选择absolute还是fixed,我们可以自己尝试,选择的不同,top和left的值也就不同。根据以往的经验,absolute可能会发生抖动。我们用脚本对top和left值进行修改,滚动时#cavas的top值减小频率小,#scroll减小频率大,我们向下滚动的效果就是#scroll都已经从屏幕上方消失了,#cavas可能还在屏幕顶部留了一个尾巴。

第二种是改变背景图片的background-position,原理和前一种一样,只不过我们多半用前一种position的方法。

第三步:滚动控制

我们需要对滚动和动作效果做一个控制,我们不仅要往下面滚,还要往上滚动是不是?所以我们最好对滚动进行值的控制,我们设计好页面的高度,也就能控制滚动的范围和时长。其次,我们把位置精度的设计好,滚动时会产生什么效果要在我们的脑海中有精确的数值定位。在滚动中,我们掌握好哪些值再变,哪些值不变,阅读这篇文章可以了解。

我们对整体的把握一定要很精准,但是即使如此,我们还需要有创意。至今我仍然无法思考出,这个网站是怎么做到的。

填写个人信息,赶快回复吧!