- 网页设计中的视差滚动
- 首页
- 背景和介绍
- 概念
- 网页设计与视差滚动
- CSS技巧
- JavaScript技巧
- jQuery技巧
- Bootstrap技巧
- 结论
背景和介绍
如果您在电脑或手机上浏览任何现代网站,您可能会体验到,当您上下滚动网站时,整个屏幕似乎都在滚动方向上移动。如果背景中有这种效果,那么您滚动时前景色中的信息也会发生变化。这种效果可以简要地描述为视差滚动。
滚动
让我们了解一下滚动是什么意思。当您查看网页时,在任何方向(上、下、左、右)浏览网页的操作称为滚动。
通常,如果您是台式电脑用户,此操作是通过使用鼠标上的滚轮来完成的。
历史
让我们看看这个词——滚动。在古代,为了向远方的人发送信息,人们使用手写的卷轴。这些卷轴看起来如下图所示:
想象一下拿着卷轴的人的动作。为了完整地阅读内容,这个人需要“滚动”并将其进一步展开。使用这些卷轴也是为了保存记录文本或决策。随着时间的推移,卷轴的使用越来越多,因为它是由不同的书写材料制成的,例如纸莎草纸、羊皮纸和纸张。
随着计算机的发展,处理和存储非常大的文档、表格和图像成为可能。有时数据非常多,以至于屏幕尺寸不足以向用户呈现数据。当要显示的数据大于窗口或显示区域的大小时,数据将保持隐藏状态。这就需要一种扩展屏幕区域的方法。
下面列出了一些实现屏幕扩展的选项:
- 增大屏幕尺寸
- 减小数据尺寸
- 使用滚动
这种滚动机制对于从事图形设计和照片编辑的人来说更为重要。
视差滚动起源
让我们深入了解视差滚动的历史。首先,我们将了解视差这个词的含义。视差一词来自希腊语παράλλαξις (parallaxis),意思是交替。
如果我们从一个角度观察一个物体,物体将以特定的方式出现。但是,如果您从不同的位置移动同一个物体,物体将会有明显的移动。这种现象称为视差。
广告