介绍视差滚动（ParallaxScrolling）是指让多层背景以不同的速度移动，形成三维运动效果。其实这项技术早在2013年就已经在国外的一些网站上广泛使用了，因为它给网站带来了非常好的视觉体验，所以无数的网站都应用了这项技术。在最近的一个项目中用到了这块，觉得有必要整理一下。本文主要简单介绍什么是视差滚动，如何实现，以及如何在现有框架（vue/react）中使用视差滚动。什么是视差滚动？视差效应，原本是个天文名词。当我们仰望星空时，远处的星星移动得更慢，而更近的星星移动得更快。当我们坐在车里看着窗外时，我们也有同样的感觉。远处的群山似乎没有动静，近处的稻田飞快地掠过。许多游戏使用视差效果为场景添加三维度。简单来说，当滚动屏幕时，网页中元素的位置会发生变化。但是，不同元素的位置变化速度不同，导致网页中出现元素分层的错觉。看完上面这段话，相信你对视差滚动的概念有了初步的了解。下面我们就来看看如何用css实现视差滚动。css实现css中主要有两种实现方式：分别通过background-attachment:fixed和transform:translate3d。我们来看看具体的实现方式：background-attachment:fixed正常业务开发中可能用不到background-attachment，我们先来认识一下。background-attachmentCSS属性确定背景图像的位置是固定在视口内，还是随包含块滚动。它具有三个属性：fixed：该关键字表示背景相对于视口是固定的。即使元素有滚动机制，背景也不会随着元素的内容滚动。local：该关键字表示背景相对于元素的内容是固定的。如果一个元素有滚动机制，背景将随着元素的内容滚动。scroll：这个关键字表示背景相对于元素本身是固定的，而不是随着它的内容滚动。我们使用background-attachment:fixed来实际显示偏差滚动，看一下示例://html1