反应背景图像会根据组件而变化，我想知道如何做到这一点

Question

我正在学习，我看到了tomorrowland网站，我想复制它，只有在主页上有这个背景滚动效果，它根据组件而变化我不知道如何编码，我需要你的帮助

import './App.css';
import Hero from './components/hero/Hero';

function App() {
  return (
    <div className="app">
      <div className="Blobs_blobs__cW0d3">
        <img src="/images/principal_bg.jpg" className="Blobs_backgroundImage__ciJQh Blobs_visible__EJ_Hc" alt="default background" />
        <img src="/images/bleu_bg.jpg" className="Blobs_backgroundImage__ciJQh" alt="Belgium background" />
        <img src="/images/blanc_bg.jpg" className="Blobs_backgroundImage__ciJQh" alt="Winter background" />
        <img src="/images/violet_bg.jpg" className="Blobs_backgroundImage__ciJQh" alt="Brasil background" />
        <img src="/images/rouge_bg.jpg" className="Blobs_backgroundImage__ciJQh" alt="Owr background" />
      </div>
      <div className='appContainer'>
        <Hero />
        <Hero />
        <Hero />
        <Hero />
        <Hero />
      </div>
    </div>
  );
}

Answer 1

设置一个状态来存储背景颜色，并设置不同滚动位置时的状态。

类似这样的：

设置您的初始状态。在 TL 网站上它是橙色的，所以我会使用它

const [backgroundColor, setBackgroundColor] = useState('orange');

在挂载时有一个“滚动”事件侦听器，并在卸载时将其删除以避免内存泄漏。

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
}, []);   // on mount

然后是一些检查滚动位置并相应更新背景颜色状态的函数。

const handleScroll = () => {
    const scrollPosition = window.scrollY;
    if (scrollPosition < 100) {
      setBgColor('white');
    } else if (scrollPosition < 200) {
      setBgColor('lightblue');
    } else if (scrollPosition < 300) {
      setBgColor('lightgreen');
    } else {
      setBgColor('lightcoral');
    }
};

祝你好运。