Particles on one component, staying even when I scroll to another component about react

[matteobruni]

https://www.reddit.com/r/tsParticles/comments/w8luvb/why_my_particles_are_full_screen_i_want_them_to/

[Alainledev]

Thank you for your reply !

I've tried the suggestions and added the below to my codes :

CSS Home

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 4rem 0;
}

.particlesContainer {
  height: 100vh; 
  position : relative;
}

#tsparticles { 
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
}

Related to the Home component :

      <div className={styles.particlesContainer}>
        <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
        options={particlesOptions}
        />
      </div>

Sadly it only affected sizes of my div but nothing changed at the level of the particles. These are still active on my component Technologies when I scroll down.

[matteobruni]

Have you changed the config? Please read carefully the post

[Alainledev]

Regarding the config, I've copy/paste yours for a try :

{
  fullScreen: { enable: false, zIndex: 0 },
  particles: {
    color: {
      value: "#ff0000",
      animation: {
        enable: true,
        speed: 20,
        sync: true,
      },
    },
    lineLinked: {
      blink: false,
      color: "random",
      consent: false,
      distance: 30,
      enable: true,
      opacity: 0.3,
      width: 0.5,
    },
    move: {
      attract: {
        enable: false,
        rotate: {
          x: 600,
          y: 1200,
        },
      },
      bounce: false,
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: true,
      speed: 0.5,
      straight: false,
    },
    number: {
      density: {
        enable: false,
        area: 2000,
      },
      limit: 0,
      value: 200,
    },
    opacity: {
      animation: {
        enable: true,
        minimumValue: 0.05,
        speed: 2,
        sync: false,
      },
      random: false,
      value: 1,
    },
    shape: {
      type: "circle",
    },
    size: {
      animation: {
        enable: false,
        minimumValue: 0.1,
        speed: 40,
        sync: false,
      },
      random: true,
      value: 1,
    },
  },
  polygon: {
    draw: {
      enable: true,
      lineColor: "rgba(255,255,255,0.2)",
      lineWidth: 0.3,
    },
    move: {
      radius: 10,
    },
    inlineArrangement: "equidistant",
    scale: 0.5,
    type: "inline",
    url: "https://particles.js.org/images/smalldeer.svg",
  },
};

And here is the result :

It only takes a part of the screen

[matteobruni]

That's because you disabled the full screen css, now it's a standard div and you have to manage the css yourself.