使用 react-spring 在 React 中创建视差滚动效果.mp4

react jsjavascript libraryfront end technology更新于 2025/11/19 1:48:17

在本文中，我们将了解如何使用 react-spring 动画库在 React.js 中实现流行的视差效果。视差是指沿着两条不同的视线观察物体时，物体视位置的位移或差异，通过这两条视线之间的倾斜角来测量。视差滚动是指背景内容以与前景内容不同的速度移动的效果。那么，让我们开始吧。

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

转到项目目录 −

cd tutorialpurpose

示例

安装以下软件包 −

npm install react-spring
npm i --save @react-spring/parallax

react-spring 用于向我们的网站添加基于 Spring 概念的动画，此库将用于添加不同类型的动画。 react-spring/parallax 将用于添加视差效果。

在 App.js 中添加以下代码行 −

import React, { useState } from "react";
import { Parallax, ParallaxLayer } from "@reactspring/parallax";

export default function App() {
   return (
      <Parallax pages={2} style={{ top: "0", left: "0" }}>
         <ParallaxLayer
            offset={0}
            speed={2.5}
            style={{
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
            }}
         >
         <p>Scroll down</p>
         </ParallaxLayer>
         <ParallaxLayer
            offset={1}
            speed={2}
            style={{ backgroundColor: "#ff6d6d" }} />

         <ParallaxLayer
            offset={1}
            speed={0.5}
            style={{
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
               color: "white",
            }}>
            <p>Scroll up
         </ParallaxLayer>
      </Parallax>
   );
}