网页特效:滚动视差设计指南

什么是滚动视差(Parallax Scrolling)? 让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

1:本是天文术语。看星星时,离得远的星星移动慢,离得近的星星移动快。

2:坐车上看窗外也有这感觉。

3:游戏中也是。(比如小霸王的超级马里奥)

网页中,滚动视差会有以下几层:背景层,贴图层,内容层。

1:背景层移动最慢

2:贴图层(在背景和内容层之间)次慢

3:内容层最快(和滚动页面速度一致)。

 

使用案例:

1:加载完成后会跳到页面的最底部,火箭为载体,以遨游太空为故事背景,随着火箭升空页面逐渐向上滚动,随之以场景化手段描述2001-2012这10年经历。

2:巧妙的将网页的向下滚动转化为深海遨游,导航化为深度标尺,随着网页滚动逐渐向深海下沉,也逐渐在深海中看到众多不同的景观。

 网页特效:滚动视差设计指南_第1张图片

这类网站将内容进行重新整理,将其故事化场景化。需要有清晰地故事逻辑

1:需要一个视觉元素贯穿整站,比如马里奥赛道,宇宙飞船,潜水的管道和小人。会让读者产生代入感,随着这个引导元素体验整个故事。

2:设计分层时要定位好背景层,贴图层和内容层之间的关系。

3:贴图层的存在是为了更有效的传达视觉效果,如果成为了干扰,则会违背了我们的初衷。

4:内容层的展现是最主要的!无论背景层和贴图层多花哨,设计过程中内容层对用户的展示是最优先的。

5:这类设计难点在于故事化,“网站很难故事化怎么办?”那我们可以“多场景化”。

网页特效:滚动视差设计指南_第2张图片

 

网页特效:滚动视差设计指南_第3张图片

 

转载于:https://www.cnblogs.com/ming-os9/p/8949957.html

你可能感兴趣的:(网页特效:滚动视差设计指南)