如何在React中使粒子效果在横幅部分结束后消失？

huangapple
go评论101阅读模式
英文:

How to make particles js to disappear after banner section end in react

问题

  1. <canvas data-generated="false" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: -1 !important; top: 0px !important; left: 0px !important; background-color: rgb(0, 0, 0); pointer-events: none;" aria-hidden="true" width="133" height="640"></canvas>
  1. export default function Banner() {
  2.     return (
  3.         <section className="banner">
  4.             <ParticlesBg className="bg" />
  5.             <main>
  6.                 <h1>你好，世界</h1>
  7.             </main>
  8.         </section>
  9.     )
  10. }
  1. export function ParticlesBg() {
  2.     const particlesInit = useCallback(async engine => {
  3.         console.log(engine);
  4.         // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
  5.         // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
  6.         // starting from v2 you can add only the features you need reducing the bundle size
  7.         await loadFull(engine);
  8.     }, []);
  10.     const particlesLoaded = useCallback(async container => {
  11.         await console.log(container);
  12.     }, []);
  14.     return (
  15.         <Particles
  16.             id="tsparticles"
  17.             init={particlesInit}
  18.             loaded={particlesLoaded}
  19.             options={{
  20.                 fullScreen: {
  21.                     "enable": true,
  22.                     "zIndex": -1,
  23.                 },
  24.                 background: {
  25.                     color: {
  26.                         value: "#000000",
  27.                     },
  28.                 },
  29.                 // ... (其余未翻译内容)
  30.             }}
  31.         />
  32.     );
  33. }
  1. .banner{
  2.     width: 100%;
  3.     height: 100vh;
  4. }
  6. .banner h1 {
  7.     font-size: 60px;
  8.     color: white;
  9. }
  11. #particles-canvas {
  12.     position: absolute !important;
  13. }
英文:

I built a banner section with particles js background. and I want start new section but the particles js background is fixed position important. I want to make the particles disappear after the banner end .
I opend the developer tools and this is the code of canvas:

  1. <canvas data-generated="false" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: -1 !important; top: 0px !important; left: 0px !important; background-color: rgb(0, 0, 0); pointer-events: none;" aria-hidden="true" width="133" height="640"></canvas>

Banner.js code:

  1. import { ParticlesBg } from "./ParticlesBg"
  2. import './banner.css'
  4. export default function Banner() {
  5.     return (
  6.         <section className="banner">
  7.             <ParticlesBg className="bg" />
  8.             <main>
  9.                 <h1>Hello World</h1>
  10.             </main>
  11.         </section>
  12.     )
  13. }

ParticlesBg.js code:

  1. import { useCallback } from "react";
  2. import Particles from "react-tsparticles";
  3. import { loadFull } from "tsparticles";
  5. export function ParticlesBg() {
  6.     const particlesInit = useCallback(async engine => {
  7.         console.log(engine);
  8.         // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
  9.         // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
  10.         // starting from v2 you can add only the features you need reducing the bundle size
  11.         await loadFull(engine);
  12.     }, []);
  14.     const particlesLoaded = useCallback(async container => {
  15.         await console.log(container);
  16.     }, []);
  18.     return (
  19.         <Particles
  20.             id="tsparticles"
  21.             init={particlesInit}
  22.             loaded={particlesLoaded}
  23.             options={{
  24.                 fullScreen: {
  25.                     "enable": true,
  26.                     "zIndex": -1,
  27.                     
  28.                 },
  29.                 background: {
  30.                     color: {
  31.                         value: "#000000",
  32.                     },
  33.                 },
  34.                 fpsLimit: 60,
  35.                 interactivity: {
  36.                     events: {
  37.                         onClick: {
  38.                             enable: false,
  39.                             mode: "push",
  40.                         },
  41.                         onHover: {
  42.                             enable: false,
  43.                             mode: "repulse",
  44.                         },
  45.                         resize: true,
  46.                     },
  47.                     modes: {
  48.                         push: {
  49.                             quantity: 4,
  50.                         },
  51.                         repulse: {
  52.                             distance: 200,
  53.                             duration: 0.4,
  54.                         },
  55.                     },
  56.                     position: "absolute"
  57.                     
  58.                 },
  59.                 particles: {
  60.                     color: {
  61.                         value: "#ffffff",
  62.                     },
  63.                     links: {
  64.                         color: "#ffffff",
  65.                         distance: 150,
  66.                         enable: true,
  67.                         opacity: 0.5,
  68.                         width: 1,
  69.                     },
  70.                     collisions: {
  71.                         enable: true,
  72.                     },
  73.                     move: {
  74.                         directions: "none",
  75.                         enable: true,
  76.                         outModes: {
  77.                             default: "bounce",
  78.                         },
  79.                         random: false,
  80.                         speed: 1,
  81.                         straight: false,
  82.                     },
  83.                     number: {
  84.                         density: {
  85.                             enable: true,
  86.                             area: 800,
  87.                         },
  88.                         value: 80,
  89.                     },
  90.                     opacity: {
  91.                         value: 0.5,
  92.                     },
  93.                     shape: {
  94.                         type: "circle",
  95.                     },
  96.                     size: {
  97.                         value: { min: 1, max: 5 },
  98.                     },
  99.                 },
  100.                 detectRetina: true,
  101.             }}
  102.         />
  103.     );
  106. }

CSS code:

  1. .banner{
  2.     width: 100%;
  3.     height: 100vh;
  4. }
  6. .banner h1 {
  7.     font-size: 60px;
  8.     color: white;
  9. }
  11. #particles-canvas {
  12.     position: absolute !important;
  13. }

答案1

得分: 0

在CSS代码中：

  1. section:not(.banner) {
  2.     background-color: white;
  3. }
英文:

In CSS code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. section:not(.banner) {
  2.     background-color: white;
  3. }

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 00:42:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75494808.html
  • css
  • javascript
  • particles
  • react-particles-js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定