NEWS

新闻资讯

w66利来国际·(中国游)官方网站不只做网站...

什么是滚动视差?网站设计之视差滚动特效

发表日期：2022-03-14 文章编辑：利来国国际网络文章来源：深圳网站设计

作为未来网页设计的热点趋势之一的“滚动视差”在近年来被越来越多网站所采用，特殊新颖的展示模式也让许多用户眼前一亮。网络上也如雨后春笋一般出现了很多像《30个让人兴奋的视差滚动网站》、《60个视差滚动网站赏析》……等一系列的视差滚动的文章，不过赏析的居多，真正指导设计师如何去设计，如何去实现的实用型文章却很少。于是萌发了自己写一篇的想法，与感兴趣的人共同交流下滚动视察设计时的一些心得。

什么是滚动视差?

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

视差效果，原本是一个天文学术语，当w66利来国际·(中国游)官方网站观察星空时，离w66利来国际·(中国游)官方网站远的星星移动速度较慢，离w66利来国际·(中国游)官方网站近的星星移动速度则较快。当w66利来国际·(中国游)官方网站坐在车上向车窗外看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和w66利来国际·(中国游)官方网站人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

看似复杂其实这个早就不是什么新鲜事儿，这种设计思路早在80年代的小霸王学习机上就见过。

网页特效设计之滚动视差设计指南,PS教程,

在这个画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网页也是如此。一个滚动视察的网站至少会有以下几层：背景层，内容层，贴图层。

背景层的滚动(最慢)

贴图层(内容层和背景层之间的元素)的滚动(次慢); 按照现实生活的经验，越远的景物移动越慢。

内容层的滚动(可以和页面的滚动速度一致) 。

w66利来国际·(中国游)官方网站让三个图层的滚动速度不一致，就做出了简单的差异滚动效果。

当然这只是实现了简单的滚动视差效果，距离一个好的滚动视察网站还不够。