Jump to content

Removing this minus symbol

Recommended Posts

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?

image.thumb.png.f58916eb6aa3bfcd98d8688ef092cab6.png

Link to comment

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. 

Link to comment
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.