This time I will share jQuery Plugin and tutorial about Generating Animated Particles with jQuery and Canvas, hope it will help you in programming stack.
| File Size: | 76.1 KB |
|---|---|
| Views Total: | 2879 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Canvas Particles is a JQuery plugin that renders animated, interactive, fully configurable particles using HTML5 canvas 2D API.
Basic usage:
1. Include the latest version of jQuery library and the jQuery Canvas Particles plugin at the bottom of the html page.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
2 |
<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.
1 |
$("#demo").particles({ |
2 |
amount:10, |
3 |
duration:{random:true}, |
4 |
speed:{speed:1}, |
5 |
layout:"after", |
6 |
color:{random:true} |
7 |
}).click(function(){ |
8 |
$(this).particles("stop"); |
9 |
}); |
3. There are tons of options which can be passed to particles() as an object:
01 |
// amount of particles |
02 |
amount:10, |
03 |
04 |
// default state |
05 |
// "playing" or "stopped" |
06 |
state:"playing", |
07 |
08 |
// after finishing "change" or "remove" particle |
09 |
end:"change", |
10 |
11 |
// direction |
12 |
dir:{ |
13 |
x:1, // 1, 0 or -1 |
14 |
y:1, // 1, 0 or -1 |
15 |
xrand:true, //random dir.x |
16 |
yrand:true, //random dir.y |
17 |
rand:true, //random change of dir.x and dir.y |
18 |
xfunction:function(dx,px,dy,py,s,w,h){return px+=dx*s;}, //determines the x movement |
19 |
yfunction:function(dx,px,dy,py,s,w,h){return py+=(Math.sin(2*Math.PI*(px/w))*(dy*s))} //determines the y movement |
20 |
}, |
21 |
22 |
// image url to use as particle |
23 |
image:false, |
24 |
25 |
// radious |
26 |
radius:{ |
27 |
radius:5, // if radius random is true then this is max radius |
28 |
random:false, // random radius between radius.radius and radius.min |
29 |
min:3 // minimum radius if radius.random is false then it is omitted |
30 |
}, |
31 |
32 |
// each particle duration |
33 |
duration:{ |
34 |
duration:10000, // 1000 == 1s default 10s |
35 |
random:false, // random between duration.duration and duration.min |
36 |
min:1000, // minimum duration default 1s |
37 |
firststep:-2000 // time between duration end and restart if end=="change" |
38 |
}, |
39 |
40 |
// animation speed |
41 |
speed:{ |
42 |
speed:1, // default value to use on dir.xfunction and dir.yfunction |
43 |
random:false, // random between speed.speed and speed.min |
44 |
min:.2 //minimum speed default .2 times the movement |
45 |
}, |
46 |
47 |
// opacity |
48 |
opacity:{ |
49 |
opacity:1, // default opacity 1 if opacity.animation or opacity.random it is max opacity |
50 |
random:false, // random between opacity.opacity and opacity.min |
51 |
min:0, // minimum opacity default 0 |
52 |
animation:true, // if true opacity increases until max opacity |
53 |
decay:true // if true opacity decreases until min opacity |
54 |
}, |
55 |
56 |
// start position inside element |
57 |
position:{ |
58 |
x:0, // x position default 0 |
59 |
y:0, // y position default 0 |
60 |
random:false // if true get random point inside element |
61 |
}, |
62 |
63 |
// color |
64 |
color:{ |
65 |
color:{r:255,g:255,b:255}, // default color for particles rgb(255,255,255) |
66 |
random:false, // if true get color between color.color and color.min |
67 |
min:{r:0,g:0,b:0} // minimum color default rgb(0,0,0) |
68 |
}, |
69 |
70 |
// before or after element content |
71 |
layout:"before", |
72 |
73 |
// if particle position is outside element "back" return to the other side and "bounce" change direction |
74 |
bound:"back", |
75 |
76 |
// event handler when init is ready |
77 |
create:false, |
78 |
79 |
// event handler when a new particle is added return the new particle in event.detail.added |
80 |
addParticle:false, |
81 |
82 |
// event handler when the state change return "playing" or "stopped" in event.detail.state |
83 |
stateChange:false, |
84 |
85 |
// event handler when a particle is removed return the particle in event.detail.removed |
86 |
removeParticle:false |
4. API methods.
01 |
// add new particle |
02 |
$(this).particles("add"); |
03 |
04 |
// add new particle with options |
05 |
$(this).particles("add",{ |
06 |
// options here |
07 |
}); |
08 |
09 |
// stop the animation |
10 |
$(this).particles("stop"); |
11 |
12 |
// destroy the plugin |
13 |
$(this).particles("destroy"); |
5. Events.
01 |
// create |
02 |
$(this).on("create.particles",function(event){}); |
03 |
$(this).particles( |
04 |
create:function(){} // Initialize with the create callback specified |
