bchung99 Posted June 11, 2021 Share Posted June 11, 2021 Hi! I'm working on adding this neat particles.js animation to my client's website: https://codepen.io/VincentGarreau/pen/pnlso Everything is going well but I hit a roadblock. I want the animation to be a background for a page section, almost like a banner for an index page, but the animation is very small and narrow. Is there a fix for this? Also, there's this annoying minus symbol thing in the middle of the animation. Anyone know how to remove this? Link to comment
Wolfsilon Posted June 11, 2021 Share Posted June 11, 2021 Hello, This code from CodePen uses several CSS lines for the dimensions that are causing the narrow box. You'll want to set the CSS for the following to achieve a specified height and width. #particles-js { position: absolute; width: 100%; height: 50vh; background-color: #b61924; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } In terms of the "minus" symbol. There are several possibilities that could be causing that icon to appear. The first being that while the animation is running, you're still viewing the page in the editor mode. Try refreshing the page and see if the animation and the symbol are still visible. If so, then you'll notice that I removed several lines from the original Particles-JS CSS code that I shared. The first being, a call for "background-image: url("");". You'll want to start there. If this removes the symbol then you're all set. If the symbol is still appearing after a refresh and removal of the CSS lines. You're likely going to want to recreate the options file for Particles.JS. The Code on CodePen was last updated in 2016 and includes other resources that might be outdated. I've installed this library numerous times and don't recall seeing this symbol either. So try to reconfigure the settings and install the library again. bchung99 1 Link to comment
bchung99 Posted June 12, 2021 Author Share Posted June 12, 2021 19 hours ago, Wolfsilon said: Hello, This code from CodePen uses several CSS lines for the dimensions that are causing the narrow box. You'll want to set the CSS for the following to achieve a specified height and width. THANK YOU! I changed the background-position y percentage to 400% and now the symbol is not visible. The animation looks great now. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment