Tutorial No.2

Background Particles

Subtle background animation plug-in Particle-Ground is here to aid our design!

  Feeling click-happy?

Creat HTML

  ‒ No Font-Awesome needed this time

  • ♦  Give your div a class name for jQuery to call later
  • ♦  Let's include the plug-in in the html file
  • ♦  ⤑ Download Here
  • ♦  Make sure the file is in scripts folder and is properly linked in the html file (order matters)
  • ♦  There are no extra CSS file needed
  • ♦  Read README.md if you'd like to understand the different options this plug-in gives you when it comes to particle colors, line colors and more.

Attach Stylesheet

  ‒ This plug-in automatically adds a canvas tag, this tag needs to be positoined

  • ♦  Be sure to add z-index for the particles to be showing behind your text
  • ♦  The class '.pg-canvas' is automatcially added by the plug-in
  • ♦  That's all the CSS we need

Magical jQuery

  ‒ Add the effect to desired div

  • ♦  '.particleground()'is the function for this great effect
  • ♦  In this case, I have chosen a color for both line and dot
  • ♦  density: manipulates the particle density
  • ♦  That's all the codes, thanks to Jonathan Nicol, the world is a better place