0

I want to do an effect with particlejs, I want to contain my particle in a div with (width: 250px, height: 250px) but I can't. I don't know why all particles are in all pages.

I tried to contain the div in div with absolute/relative positioning.

import { useCallback } from "react";
import Particles from "react-tsparticles";
import type { Container, Engine } from "tsparticles-engine";
import { loadFull } from "tsparticles";

import '../style/Particules.css'

const Particule = () => {
    const particlesInit = useCallback(async (engine: Engine) => {
        console.log(engine);

        // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (


        <div className="container">
            <div>

                <h2>first</h2>
            </div>

            <div> <h2>second</h2>
                <Particles
                    id="tsparticles"
                    init={particlesInit}
                    loaded={particlesLoaded}
                    options={{
                        background: {
                            color: {
                                value: "#0d47a1",
                            }
                        },

                        fullScreen: {
                            enable: true,
                            zIndex: -1,
                        },
                       
                        fpsLimit: 60,
                        interactivity: {
                            events: {
                                onClick: {
                                    enable: true,
                                    mode: "push",
                                },
                                onHover: {
                                    enable: true,
                                    mode: "repulse",
                                },
                                resize: true,
                            },

                            modes: {
                                push: {
                                    quantity: 1,
                                },
                                repulse: {
                                    distance: 100,
                                    duration: 0.04,
                                },
                            },
                        },
                        particles: {
                            color: {
                                value: "#fff",
                            },

                            links: {
                                color: "#ffffff",
                                distance: 15,
                                enable: true,
                                opacity: 0.1,

                            },
                            collisions: {
                                enable: false,
                            },
                            move: {
                                direction: "none",
                                enable: true,
                                outModes: {
                                    default: "bounce",
                                },
                                random: false,
                                speed: 0.5,
                                straight: false,
                            },
                            number: {
                                density: {
                                    enable: true,
                                    area: 800,
                                },
                                value: 30,
                            },
                            opacity: {
                                value: 2,
                            },

                            style: {
                                position: "absolute"
                            },
                            shape: {
                                type: "images",
                                "images":
                                    [{
                                        "src": 'https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56314216.png',

                                    }, {
                                        "src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56597539.png"
                                    },
                                    {
                                        "src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/4042942.png"
                                    },
                                    {
                                        "src": ""
                                    }

                                    ]
                            },
                            size: {
                                random: true,
                                value: 50,

                            },
                        },
                        detectRetina: true,
                    }}
                />
            </div>
            <div>
                <h2>third</h2>
            </div>
        </div>
    );
};
export default Particule;

CSS

.container{
    display: flex;
    position: absolute;
    width: 100vw;
    height : 100%;
    top: 0;
    left: 0;
  

  }

  .container > div {
    position: relative;
    width: 100%;
   
  }

I want to contain the particles only in the second div:

Particles showing up now

My 2nd div where I want to show the particles

I've tried to add the the position absolute in the </Particle>, but so far nothing have worked

<Particles
    id="tsparticles"
    init={particlesInit}
    loaded={particlesLoaded}
    options={{
        background: {
            color: {
                value: "#0d47a1",
            }
        },
        style:{
            position:"absolute"
        },
double-beep
  • 5,031
  • 17
  • 33
  • 41
Chakib Araf
  • 11
  • 1
  • Please [edit] your question title to describe the problem you're having or question you're asking. Your current title is a useless repetition of the tags (which should not be in the title at all). Your title should be clear and descriptive enough to convey meaning about what is being asked to a future site user who is skimming a list of search results trying to find a solution to a problem. Your current title says nothing at all. You'll find your experiences here will be much better if you spend some time taking the [tour] and reading the [help] pages to learn how the site works before posting – Ken White Feb 19 '23 at 19:31
  • Normally all the CSS you need is `.container > div:nth-child(2) { position: relative }`, without any custom styles on `.container`. If that doesn't solve your issue, I doubt anyone can help you without a *runnable* [mcve]. Consider using codesandbox.io or similar. – tao Feb 19 '23 at 19:57

1 Answers1

0

I find the solution, have to write false in fullscreen:

{   // ...
    fullScreen: {
    enable: false,
    zIndex: -1,
    },
    fpsLimit: 60,
    interactivity: {
    events: {
    // ...
}}}
bunyaminkirmizi
  • 540
  • 2
  • 6
  • 22
Chakib Araf
  • 11
  • 1