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

[Alainledev]

Contact Details

le.alain@live.fr

What do you need?

Hello !

This is my first post and I'm a very beginner programmer, so sorry in advance if anything missing.

I am on React with Next.js.

I would like to create a website with particles on my Homepage, which correspond to a component named "Home". And the particles should disappear on the component below named "Technologies". Basically, I would like to get something similar to that regarding the particles : https://whosbl33h.netlify.app/

The problem on my side is that particles stay even when I scroll down.

Here are my codes below.

Component 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;

ParticlesOptions :

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,
}

Component Tehcnologies :

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;

And my page 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;

Sorry in advance for all these lines of codes. Please let me know if you may need any other information.

Thank you very much for any help !

tsParticles Version

3.0.2

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[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.