陈斌彬的技术博客

Stay foolish,stay hungry

Html5多图滑动效果或者叫视觉差滚动效果

近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很具有吸引力,它就是错位视觉滚动效果(或者叫视差滚动技术)。错位视觉滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验。

它的原理就是一种利用控制各个图片层之间滚动的速度,来产生一种立体空间的效果,每个层都用一个png 透明图片做为背景,然后滚动的时候控制一下每个不同的速度。