-
-
Notifications
You must be signed in to change notification settings - Fork 816
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to make tsParticles full width and height of a container and not the whole page? #1277
Comments
Thanks for opening a new issue. The team has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles |
Hi @lloydjatkinson, Yes, this configuration is possible. You can see that working in these samples https://codepen.io/matteobruni/pen/XWjLOpQ https://codepen.io/matteobruni/pen/QWKXPRq I try to explain how to achieve it. tsParticles.load('your-div-id', { /* your configuration */ }); // or loadJSON if you are using an external JSON file Don't enable The best result will be achieved using a container for particles and your content like this: <div id="container">
<div id="tsparticles"></div>
<div id="your-div"></div>
</div> #container {
position: relative
}
#tsparticles {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
z-index: 0; /* if you use -1 you have to set to `"window"` the interactivity.detectsOn property */
}
#your-div {
position: absolute;
top: 0;
left: 0;
z-index: 1;
} Hope it helps, if you need more help don't hesitate to ask |
Thank you, brilliant tip! |
How to achieve that with "react-tsparticles"? |
Starting from 1.37.0 the |
Is it possible to eloborate a little more on how to get particles only to work on a spesific seciton of the page? i am using react-tsparticles. Been stuck for 2 days now, trying to figure it out... |
I've created a sample to show just the differences here: https://codepen.io/matteobruni/pen/BawqaxW I'll explain below more in details: Full Screen It's the standard behavior, if you load a standard tsParticles config without specifying any HTML <div id="tsparticles-full"></div> CSS /* No custom CSS needed */ JavaScript tsParticles.load("tsparticles-full", { /* options here */ }); Custom Positioning This is achieved disabling the HTML <div id="tsparticles-custom"></div> CSS /* this creates a 200x200 pixels square in the middle of the page containing the particles, you need to create your own CSS to position the particles where you need them */
#tsparticles-custom {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
margin: 0;
padding: 0;
width: 200px;
height: 200px;
z-index: 10;
} JavaScript tsParticles.load("tsparticles-custom", {
fullScreen: {
enable: false
},
/* all other options */
}); |
Thank you for the reply @matteobruni . Still trying but cant seem to work, guess i need to learn more ;) i am using react. and currently created an config file
and then a background file
I now want the particles to be displayed in a column , on a spesific part of the page. now it is displaying in the middle on all pages. Thanks for all the help anyways, i will keep trying! :) |
The configuration object has an issue for
I've fixed the |
Hi @SuperWoll |
I've managed to set the particles as the background of a container div using react-tsparticles like in the example below. In my React component:
In the CSS:
Also in particlesConfig:
|
I'm using SvelteKit. I tried to adapt these suggestions to SvelteKit, but none of these solutions work to display the particles only within a smaller
I've already looked at the old demos . . . . . . but they are based on a very old version and they seem to work a bit differently than the 2.x versions and they don't work with SvelteKit's dynamic import requirement. For example, maybe the way that Svelte's dynamic import works requires a different approach to apply the styles? I'm not sure if this is really a bug or my ignorance, but the previous issue I was facing required the dynamic import requirement; so I'm not sure if that is impacting this issue, too. For reference, below is the dynamic component logic from my temp project:
When I put that component inside the divs that are suggested in this thread, it has no affect and the particles still display fullscreen. @matteobruni , I'm sorry to bother you again, but can you please use the temp project that I sent you last night from the other issue and tell me what is preventing me from displaying the particles in a smaller |
Change the {
/* other options */,
"fullScreen": {
"zIndex": 0,
"enable": false // this is the line to change
},
/* other options */,
} This will make particles container be a normal div, without any forced style to be full page size |
Aah, yes, that works. Thank you! |
|
Could be the |
It does not
It does not still work |
Open a new issue, giving me more details about your issue. I don't understand what do you mean with other pages. |
I have been struggling trying to get particles.js to be the background of a given element. That library seems to position the canvas weirdly and it always makes the canvas wider and longer than the element, and hacking around with
top
andleft
doesn't really work well either. As far as I can tell it assumes you only ever want the whole page background to be it's canvas. so I decided to look into tsParticles.Does tsParticles properly support working with an arbitrary element and it's width and height, e.g. it would use these values to create the canvas correctly? If the div is 100px wide and 100px in height, the canvas would be 100px wide and 100px in height.
For example, I have a div in the center. I'd like tsParticles to render only inside the div and underneath the text:
Would it be possible to get an example of this?
The text was updated successfully, but these errors were encountered: