一个组件上的粒子，我希望当我向下滚动到下面的组件时它们消失

Question

我正在使用 React 和 Next.js。

我想在我的主页上创建一个带有粒子的网站，它对应于名为“Home”的组件。当我向下滚动时，粒子应该消失在下面名为“技术”的组件上。

基本上，我想得到与粒子部分类似的东西：https://whosbl33h.netlify.app/

我这边的问题是，即使我向下滚动，粒子也会留下来。

Home.js 组件

import styles from '../styles/Home.module.css';
import Particles from 'react-tsparticles';
import { useCallback } from "react";
import { loadSlim } from "tsparticles-slim";
import { particlesOptions } from './Particles/particlesOptions';

function Home() {

  let isInitialized = false;

  const particlesInit = useCallback(async (engine) => {
    if(!isInitialized) {
      await loadSlim(engine);
      isInitialized = true;
    }
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await container
  }, []);

  return (
    <div>
      <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={particlesOptions}
      />
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
  );
}

export default Home;

粒子选项

export const particlesOptions = {

  interactivity: {
      detect_on: "canvas",
      
      autoPlay: true,

      fullScreen: {
        enable: false,
        zIndex: 0,
      },

      events: {
          onClick: {
              enable: true,
              mode: "repulse",
          },
          onHover: {
              enable: true, 
              mode: "bubble", 
              parallax: {
                enable: true, 
                force: 100, 
                smooth: 60, 
              },
          },
          resize: {
            delay: 0.5,
            enable: true,
          },
      },

      modes: {
          push: {
              quantity: 4,
          },
          repulse: {
              distance: 300,
              duration: 1.5,
          },
          bubble: {
              distance: 100,
              duration: 0.4,
              size: 40,
              color: {
                value: '#EAB441',
              },
              opacity: 8,
              mix: false,
          },
      },
  },

  particles: {
      collisions: {
        enable: true,
        mode: 'bounce',
      },
      color: {
          value: '#fff',
      },
      links: {
          color: "#808080",
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1,
      },
      move: {
          direction: "none",
          enable: true,
          outModes: {
              default: "bounce",
          },
          random: true,
          speed: 0.5,
          straight: false,
      },
      number: {
          density: {
              enable: false,
          },
          value: 27,
      },
      opacity: {
          value: 0.3,
      },
      shape: {
          type: 'char',
          character: [
            {
              font: 'Font Awesome 6 Brands',
              value: '\uf13b',
            },
            {
              font: 'Font Awesome 6 Brands',
              value: '\uf38b',
            },
            {
              font: 'Font Awesome 6 Brands',
              value: '\uf3b9', 
            },
            {
              font: 'Font Awesome 6 Brands',
              value: '\uf41b', 
            },
          ],
        },
        size: {
          random: {
            enable: true,
            minimumValue: 25,
            maxValue: 35,
          },
          animation: {
            count: 0,
            enable: true,
            speed: 0.2,
            decay: 0,
            sync: true,
            destroy: 'none',
            startValue: 'random',
          },
        },
  },
  detectRetina: true,
  fpsLimit: 120,
  pauseOnBlur: true,
  pauseOnOutsideViewport: true,
  smooth: true,
}

技术组件：

import styles from '../styles/Technologies.module.css'
import Image from 'next/image';

function Technologies() {
    return (
      <div id="technologies" className={styles.technologiescategory}>
            <p className={styles.title}>Technologies</p>
            <div className={styles.alltechnos}>
                <div className={styles.fronttechnos}>
                    <div className={styles.frontback}>
                        <p>Front-end</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/html.png" width={45} height={50} />  </p>
                        <p className={styles.technoname}>HTML</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/css.png" width={45} height={50} />  </p>
                        <p className={styles.technoname}>CSS</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/javascript.png" width={45} height={50} /></p>
                        <p className={styles.technoname}>Javascript</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/react.png" width={43} height={45} />  </p>
                        <p className={styles.technoname}>React & React Native</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/nextjs.png" width={43} height={45} />  </p>
                        <p className={styles.technoname}>Next.js</p>
                    </div>
                </div>
                <div className={styles.backtechnos}>
                    <div className={styles.frontback}>
                        <p>Back-end</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/node.png" width={60} height={50} />  </p>
                        <p className={styles.technoname}>Node.js</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/express2.png" width={50} height={50} /> </p>
                        <p className={styles.technonameexpress}>Express.js</p>
                    </div>
                    <div className={styles.techno}>
                        <p>  <Image src="/images/mongo2.png" width={50} height={50} />  </p>
                        <p className={styles.technonamemongo}>Mongodb</p>
                    </div>
                </div>
            </div>
      </div>
    );
  }
  
  export default Technologies;

还有我的页面App

import '../styles/globals.css';
import Head from 'next/head';
import Home from '../components/Home';
import Technologies from '../components/Technologies';

function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Next.js App</title>
      </Head>
      <Home/>
      <Technologies/>
    </>
  );
}

export default App;

我能实现的最好效果是在“Home”组件上获取粒子，当“Technologies”组件的一半显示在底部时，粒子就会消失。但它并不像我希望的那样顺利。粒子应在上面的组件“Home”部分保持活动状态。

提前谢谢您！如果您需要任何其他信息，请告诉我。

Answer 1

您可以使用像 gsap 这样的动画库来帮助您，以下资源可能对您有帮助： https://youtu.be/_hbvq1TuZs8?si=saFUKv5F9NQ5eSI1&t=531