如何在滚动时通过视差/动画效果替换Styled Components背景图

1. 重构Styled Components，支持动态属性 #

先修改你的ImgContainer，让它能接收外部传入的背景图和视差偏移参数，这样就能动态控制背景样式：

const ImgContainer = styled.div(({ bgImage, parallaxY }) => ({
  width: "100%",
  minHeight: "100vh",
  backgroundImage: `url(${bgImage})`,
  backgroundSize: "cover",
  backgroundPosition: `center ${parallaxY}px`,
  backgroundRepeat: "no-repeat",
  position: "relative",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "column",
  zIndex: 1,
}));

2. 结合React状态与滚动监听实现功能 #

在组件中通过状态管理当前背景图和视差偏移量，监听滚动事件来动态更新这两个值：

import { useState, useEffect } from 'react';
import styled from 'styled-components';
import ElHogarBg from './path/to/ElHogarBg.jpg';
// 导入需要切换的其他背景图
import SecondaryBg from './path/to/SecondaryBg.jpg';

const ImgContainer = styled.div(({ bgImage, parallaxY }) => ({
  // 上面的样式代码
}));

export default function ParallaxBackground() {
  const [currentBg, setCurrentBg] = useState(ElHogarBg);
  const [parallaxOffset, setParallaxOffset] = useState(0);
  // 可选：添加节流优化滚动性能
  let lastScrollTime = 0;

  useEffect(() => {
    const handleScroll = () => {
      // 节流：避免滚动事件高频触发
      if (Date.now() - lastScrollTime < 16) return;
      lastScrollTime = Date.now();

      const scrollY = window.scrollY;
      // 计算视差偏移：背景滚动速度为内容的1/5，可自行调整比例
      const parallaxY = scrollY * 0.2;
      setParallaxOffset(parallaxY);

      // 根据滚动位置切换背景图，这里以600px为切换阈值
      if (scrollY > 600 && currentBg !== SecondaryBg) {
        setCurrentBg(SecondaryBg);
      } else if (scrollY <= 600 && currentBg !== ElHogarBg) {
        setCurrentBg(ElHogarBg);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [currentBg]);

  return (
    <div>
      <ImgContainer bgImage={currentBg} parallaxY={parallaxOffset}>
        {/* 容器内的内容 */}
        <h1>滚动查看视差背景切换效果</h1>
      </ImgContainer>
      {/* 添加足够内容让页面可滚动 */}
      <div style={{ height: '2000px', padding: '20px' }}>
        <p>向下滚动触发背景切换...</p>
      </div>
    </div>
  );
}

3. 可调整的优化点 #

• 视差比例：修改scrollY * 0.2中的0.2，值越小背景滚动越慢，视差效果越明显
• 切换阈值：把600px改成你需要的滚动位置，也可以通过getBoundingClientRect()监听特定元素的位置来触发切换，更精准
• 多背景切换：如果有超过2张背景图，可以把背景图存入数组，根据滚动区间判断切换哪一张

内容的提问来源于stack exchange，提问作者zakaullah javaid