Generating Animated Particles with jQuery and Canvas

File Size: 76.1 KB
Views Total: 3337
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Generating Animated Particles with jQuery and Canvas

Canvas Particles is a JQuery plugin that renders animated, interactive, fully configurable particles using HTML5 canvas 2D API. 

See also:

Basic usage:

1. Include the latest version of jQuery library and the jQuery Canvas Particles plugin at the bottom of the html page.

<script src="//"></script>
<script src="jquery.canvas.particles.min.js"></script>

2. The JavaScript to generate 10 circular particles on the container 'demo' that will stop the animation on mouse hover.


3. There are tons of options which can be passed to particles() as an object:

// amount of particles

// default state
//  "playing" or "stopped"

// after finishing "change" or "remove" particle

// direction
  x:1,  // 1, 0 or -1
  y:1,  // 1, 0 or -1
  xrand:true, //random dir.x
  yrand:true, //random dir.y
  rand:true,  //random change of dir.x and dir.y
  xfunction:function(dx,px,dy,py,s,w,h){return px+=dx*s;},  //determines the x movement
  yfunction:function(dx,px,dy,py,s,w,h){return py+=(Math.sin(2*Math.PI*(px/w))*(dy*s))} //determines the y movement

// image url to use as particle

// radious 
  radius:5, // if radius random is true then this is max radius
  random:false, // random radius between radius.radius and radius.min
  min:3 // minimum radius if radius.random is false then it is omitted 

// each particle duration
  duration:10000, // 1000 == 1s default 10s
  random:false, // random between duration.duration and duration.min
  min:1000, // minimum duration default 1s
  firststep:-2000 // time between duration end and restart if end=="change"

// animation speed
  speed:1,  // default value to use on dir.xfunction and dir.yfunction
  random:false, // random between speed.speed and speed.min
  min:.2  //minimum speed default .2 times the movement

// opacity
  opacity:1,  // default opacity 1 if opacity.animation or opacity.random it is max opacity
  random:false, // random between opacity.opacity and opacity.min
  min:0,  // minimum opacity default 0 
  animation:true, // if true opacity increases until max opacity 
  decay:true  // if true opacity decreases until min opacity

// start position inside element
  x:0,  // x position default 0
  y:0,  // y position default 0
  random:false  // if true get random point inside element

// color
  color:{r:255,g:255,b:255},  // default color for particles rgb(255,255,255)
  random:false, // if true get color between color.color and color.min
  min:{r:0,g:0,b:0} // minimum color default rgb(0,0,0)

// before or after element content 

// if particle position is outside element "back" return to the other side and "bounce" change direction

// event handler when init is ready

// event handler when a new particle is added return the new particle in event.detail.added

// event handler when the state change  return "playing" or "stopped" in event.detail.state

// event handler when a particle is removed return the particle in event.detail.removed

4. API methods.

// add new particle

// add new particle with options
  // options here 

// stop the animation

// destroy the plugin

5. Events.

// create
  create:function(){} // Initialize with the create callback specified

// add
  addParticle:function(event){} // Initialize with the addParticle callback specified

// remove
  removeParticle:function(event){} // Initialize with the removeParticle callback specified

This awesome jQuery plugin is developed by UribeAbraham. For more Advanced Usages, please check the demo page or visit the official website.