parallax.jpg 引言 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。 其实，这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色的视觉体验，现在已经有数不胜数的网站应用了这项技术。 我是在最近的项目中用到了这块，觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。 什么是视差滚动？ 视差效果， 最初是一个天文术语。当我们看着繁星点点的天空时，较远的恒星运动较慢，而较近的恒星运动较快。当我们坐在车里看着窗外时，我们会有相同的感觉。远处的山脉似乎没有动，附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。 看完上面这段，相信你对视差滚动的概念已经有了一个初步的了解。下面让我们先来看一下如何用 css 来实现视差滚动。 css 实现 css 中主要有两种实现方式:分别是通过background-attachment: fixed和transform: translate3d来实现，下面让我们看一下具体的实现方式: background-attachment: fixed 平时业务开发中可能不太会用到background-attachment，让我们先来认识一下它。 background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。 scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。 我们使用 background-attachment: fixed 来实现视差滚动，看一下示例: // html // css $img1: 'https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg'; $img2: 'https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg'; $img3: 'https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg'; div { height: 100vh; background: rgba(0, 0, 0, .7); color: #fff; line-height: 100vh; text-align: center; font-size: 20vh; } .a-img1 { background-image: url($img1); background-attachment: fixed; background-size: cover; background-position: center center; } .a-img2 { background-image: url($img2); background-attachment: fixed; background-size: cover; background-position: center center; } .a-img3 { background-image: url($img3); background-attachment: fixed; background-size: cover; background-position: center center; } 效果如下: image 当然，你可以直接去这里查看:https://codepen.io/jack-cool/pen/MWYogYQ transform: translate3d 同样，让我们先来看一下两个概念transform和perspective transform: css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,等等 perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感。 先来看一下示例: // html // css html { overflow: hidden; height: 100% } body { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; } #app{ width: 100vw; height:200vh; background:skyblue; padding-top:100px; } .one{ width:500px; height:200px; background:#409eff; transform: translateZ(0px); margin-bottom: 50px; } .two{ width:500px; height:200px; background:#67c23a; transform: translateZ(-1px); margin-bottom: 150px; } .three{ width:500px; height:200px; background:#e6a23c; transform: translateZ(-2px); margin-bottom: 150px; } 效果如下: image 当然，你可以直接去这里查看:https://codepen.io/jack-cool/pen/zYxzOpb 这里解释下使用transform: translate3d来实现视差滚动的原理: 1、给容器设置上transform-style: preserve-3d和perspective: xpx，那么处于这个容器下的子元素就会处于 3D 空间中; 2、给子元素分别设置不同的transform: translateZ()，这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样; 3、滚动滚动条，由于子元素设置了不同的transform: translateZ()，那么他们滚动的上下距离translateY相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。 总结下来就是: 父容器设置transform-style: preserve-3d和perspective: xpx，子元素设置不同的transform: translateZ() 看完了用 css 实现滚动视差的两种方式，下面让我们看下如何在现有框架(vue/react)中来应用滚动视差。 vue 或 react 中使用 react 中使用 在 react 中使用可以采用react-parallax，代码示例: import React from "react"; import { render } from "react-dom"; import { Parallax } from "react-parallax"; import Introduction from "./Introduction"; const styles = { fontFamily: "sans-serif", textAlign: "center" }; const insideStyles = { background: "white", padding: 20, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }; const image1 = "https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg"; const image2 = "https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg"; const image3 = "https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg"; const image4 = "https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg"; const App = () => (