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

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

首先创建一个React项目 -

npx create-react-app tutorialpurpose

进入项目目录 -

cd tutorialpurpose

示例

安装以下包 -

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

**react-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>
   );
}