网页滚动特效要怎么设计？来看看这12个网站

7. HIKE

和前一个案例正好相反，Hike 的官网为你展现了微妙的滚动动效是怎么设计的。

页面中静态和动态元素杂糅，动态元素的动效运动速度很快，在你的视觉捕捉到它们的时候，基本上就停止运动了，让你发觉却又不带来干扰。

8. PROJECT FI

Google 的 Project Fi 的介绍页面采用了梦幻般的动效来强化整个体验。随着页面的滚动，大的内容区块之间会小幅度地加速运动，创造动态的视觉体验，而其中所承载的图标和扁平化的插画，则会以更快的速度，从下方向上浮现。

元素的展现速度并不慢，幅度也控制得恰到好处，速度差则将信息的层次感得到了强化。有趣的地方在于，当你滚动到页面底部，再向上滚动的时候，会发现动效的运动方向会正好反过来。

9. BASE

Base CRM 的首页是个很好的案例证明简单的动效同样可以创造出优秀的体验。他们首页上所采用的这种滚动渐现的动效是经过定制的，和其他的同类动效并不完全一样。

但是它依然很典型，不复杂，虽然看起来展现内容时候的幅度并不小，但是它对于体验的影响并不大。

整个网站的布局足够简约，空间留白也很多。如果他们的动效能够加载得更快一点，就完美了。

10. ANYLIST

作为一个APP的推广页面，Anylist 的网页设计可以算得上漂亮了。Anylist 页面中唯一一个运动的动效是你刚刚打开的时候，从底部运动到顶部的手机截图，而当你向下滚动浏览的时候，页面元素会由透明开始逐步显现，并不会随着滚动而运动。整个页面的滚动动效设计的颇为有凝聚力。

11. ERNEST

和其他的滚动浏览动效不同，Ernest 这个网站在这个合集当中，是独树一帜的。

它的首页采用了视差滚动的设计，同样是单页设计，但是页面被明显分割为几个不同的部分，滚动会触发动效加载下一个页面中的元素，元素运动幅度都很大，页面的定位感很强，不会因为滚动而停留在某个中间状态。

你可以使用侧面的导航来快速跳转到不同的部分，这也是单页设计和视差滚动设计中常见的元素。

12. TAXINET

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!