视差滚动 是一种网页设计技术，其中，随着访客向下滚动网页，网页的背景图像移动的速度比前景中的图像移动得慢。该技术在引导用户浏览页面和讲述故事方面做得很好。这导致许多视差网站只有一个页面。如果您想创建一个现代的 基于视差效果的一页网站，这里有20个很棒的视差滚动教程和示例。
视差正确
从那时起，视差就爆炸了。感觉每天都有使用该技术的新营销页面……这是有充分理由的。做对了，感觉很棒。问题是，使用视差的绝大多数站点都遭受了糟糕的滚动性能。对于像素密度较高的设备（例如视网膜MacBook Pro），这尤其不利。
重新创建Firewatch视差效果
作为一名网页设计师，当您听到这个词时，您可能会在里面哭泣“parallax.” It’被污染。脏。过度使用（并且经常不正确使用）的术语，这意味着“免费滚动效果”或者更糟浏览器滚动条的完整劫持。
纯CSS视差网站
本文演示了如何使用CSS变换，透视图和一些缩放技巧来创建纯CSS视差滚动网站。
视差英雄形象
通过CSS 3D变换可以实现的目标是无限的。权力伴随着责任。在某些情况下，您会充分利用CSS 3D功能。但是，在大多数项目中，您可以稍微增加一些趣味。
记录的对话
视差导航概念引擎。
的‘root element’ 视差 technique
通过结合使用rem和小的JavaScript函数来控制html元素的字体大小，我们可以实现简单但有效的视差。
滚动模糊
This pen demonstrates a simple medium.com-like blur image on scroll and content 视差 It gets the scroll position using requestAnimationFrame instead of an onScroll event.
带有SVG，SMIL和CSS的径向视差
这是结合了径向透视的视觉效果的演示（例如Apple’的QuickTime虚拟现实或Google’的街景视图）具有视差效果，近年来这种效果在Web设计中变得如此流行。
麈
在不同的宽高比下调整和重新调整SVG大小的实验。
派拉尔& Lax
容易产生视差效果。
纯CSS视差滚动
使用CSS 3D变换的技术。没有JavaScript！
全屏带视差的拖动滑块
有点响应。经过Chrome / FF / last IE的测试，到处看起来都很不错。
萨斯视差示例
通过将透视图锁定在body元素上并在其上以3D形式转换元素，您可以轻松创建不需要JavaScript的视差滚动效果，从而获得更高的性能。
404– Back to the Future
我想你不是’还没有准备好该页面…
视差滚动
简单的一页网站，具有多个视差滚动背景。对您的个人投资组合有很好的效果。
GTA 5 的CSS 3视差
淘汰赛和CSS3 3D转换可创造惊人的效果。
视差类型的东西
一个简单的视差笔，还添加了条件固定的标题并模糊了标题。
视差背景与步行周期
带有CSS3动画的多个背景图像可创建多深度视差效果。
的CSS 中的视差星背景
使用非常简单的sass函数和CSS动画关键帧，可以在空间中构建视差滚动星。 sass函数在每个负载上创建一个随机的星场。
简单的视差滚动
简单的视差滚动可以在任何地方实现。
