建站百科

文章导读：本文主要阐述了“什么是网页滚动视差效果？原本来自天文学术语”什么是滚动视差效果视差效果，原本是一天文学术语个，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则...，本文由跨屏网最后更新于2020-10-13，全文共1323个字，预计阅读时长4分24秒。

什么是滚动视差效果

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

包括在跨屏建站的模板中也大量有运用页面滚动视差效果。

    背景层的滚动、贴图层的滚动； 按照现实生活的经验，越远的景物移动越慢、内容层的滚动。

    我们让三个图层的滚动速度不一致，就做出了简单的差异滚动效果。

    需要有一个视觉引导元素贯穿整站，。这个视觉引导会让你在场景种有个代入感。仿佛你就随着这个引导元素来体验整个故事。在对设计稿分层时，设计者要定位好背景层，贴图层和内容层之间的关系。

    根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷

    内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的。

 下面从Listen everywhere、Search & discover、Build your collection、Follow & share、Radio这五个纬度来介绍spotify这个音乐产品。运用合适的背景图片营造五个场景，介绍产品的五种特性。设计者将网页分为内容层和背景层上下两层，运用滚动时的速率差异形成滚动视差。一屏一个场景，也可以称为一个画面，五个场景相互独立，通过纵向的滚屏来实现切换。

    这个网站设计者也是采用多场景式，将网页横向分割成多个场景，场景与场景之间通常颜色区分很明显，用以分割场景。场景内设计者将近景的部分做了高斯模糊，从而巧妙的形成了景深视觉效果。在技术实现上，除了利用了不同分层滚动速率不一样外，还限定了相应元素的显示范围。滚动时超出范围的部分会隐藏掉，形成被遮挡的视觉上的分层效果。

    这是一个产品的介绍网站，设计者非常有意思，以多场景的形式介绍了产品的几大功能，同时在这个过程中又以产品本身为线索贯穿所有的场景。有点像是故事型和多场景型的结合。

    毕竟视觉设计师输出的视觉稿都是静态图片，而滚动视差网站时一个随着滚动不断变化的，所以设计时与传统网页有很多不同。在设计初期设计师要判断这个页面适不适合采用滚动视差。在决定采用滚动视差之后就需要设计者整理现有的内容资料，将其故事化或场景化，然后根据构思设计出关键状态的视觉设计稿。传统网页设计师做到这一步基本上工作就已经完成，可以交给其他人不管了。但是滚动视差的网站不行，视觉设计的工作才刚刚开始，这时，你需要负责跟重构设计师讲解你的设计思路，你需要怎么分层怎么运动。在重构设计师实现的时候通常并不会一帆风顺，通常会因为实现成本等各种问题需要设计师返回去重新修改设计稿。通过反复的沟通，反复的磨合才能完成预想中的漂亮的滚动视差网站。

写在最后，以上就是对于“什么是网页滚动视差效果？原本来自天文学术语”的一些看法，欢迎指正、交流。

内容标题：什么是网页滚动视差效果？原本来自天文学术语
地址分享：http://test.kuaping.com/article/show489.html