网站设计动效介绍：视差滚动

2023-03-21 分类：网站设计

人类有很多中视觉错误，最为典型的就是“小儿辩日”。其中一个小孩说道：我认为太阳刚出来的时候距离我们近，到中午的时候距离我们远，因为太阳刚出来的时候大，而中午的时候小。
这就是一种视觉误差。
而3D效果就是这样实现的。因为我们的眼镜认为近处的东西大而远处的东西小。3D效果的实现就是让不同事物移动速度不同，让后景移动慢，而前景移动快，这就会给人眼造成前后景的错觉。
早在2011年开始，3D开始在电影制作中流行，这种技术也引入到网站设计中，设计人士将其称之为“视差滚动”。视差滚动以及发展了八年时间，我们对常用的几种视差滚动类型进行总结。
前慢后快
主要是应用在图片切换的时候，当滚动鼠标的时候，两张图片同时移动，但是前一张移动速度看，后一张移动速度快，后一张覆盖前一张完成切换。这种视差滚动，会让切换图片的过程更为平滑。
浮动移动
图片浮动在页面上，当移动鼠标的时候，浮动的画面移动速度较快，但是背景移动速度较慢。如果浮动的部分，配合动画，会让整个页面极富动感。
后动前不动
背景进行移动，但是前景的图片固定不移动，另外，背景可以在移动的过程中进行更换。这种设计，可以产生“不动若磐石”的视觉感受。
图片文本的移动
通过将图片和文本叠加在一起，并使它们以不同的速度移动，当我们滚动时，页面似乎在不断地变化并形成新的组合。
首尾相连
一直向下滚动鼠标，在主页的底部，相同类型的动画从早期在页脚重复一次，使网站完整的圆圈。
滚动条视差
网站是由几个带视差滚动条组成的。每个长条提供了一个不同的呼叫行动按钮，并拥有酒店场地和设施的图像或视频。放置在每个条带中心的文字移动的速度与背景照片的移动速度略有不同，达到了一种流畅、易于观察的效果。

如上，我们介绍了几种常见的也是易于设计的视差滚动。总结一下，视差滚动可以实现如下几种目的：让平面具有3d效果，拥有了前景和后景；让不同板块和图片的切换更为平滑；让新的图像的出现更具新颖性和闯入感。

本文名称：网站设计动效介绍：视差滚动
分享网址：https://www.cdcxhl.com/news10/246460.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站设计等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容