How to Easily Create Animated Backgrounds with Particle.Js!

  • 2
  • Article
  • Updated 1 year ago

Hello Community,

I just found a cool Javascript library, it’s called particle.js. It also has a GUI where you can design particles without knowing much code. With particle.js you can create backgrounds that look like this. I found it easy to set up pretty eye catching, to get started head over here.

There are a fair amount of options, let’s start with the background. Click page background, from here you can change the background colour, or use an image, set the size and hide the box in the middle by clicking the hide card button in this section.

Once you’re done configuring your settings click the CodePen button.

Then in the CSS section click the Tidy button and add Display:none; to the #stats CSS this will hide the little box in the top left corner now click the “Save” button. Then click “Export” in the bottom right corner and select ZIP.

Once you’ve exported the ZIP open it up and then upload the folder to Rise Storage or the web hosting provider of your choice. Then you’ll need to get the URL of the Index.html file and paste it into the Web Page Widget. Once you’ve pasted it in you’ll need to change HTTPS to HTTP then save the Widget and save and preview the presentation.

You can see what I built here.

If you use Particle.JS in your presentations be sure to share what you built here and let us know if you have any questions!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
  • Happy

Posted 3 years ago

  • 2
Photo of Ultra Tube

Ultra Tube

  • 60 Points
i want set animation in div background cursor animation must be worked