Download .zip Download .tar.gz View on GitHub GitHub Project Page
Examples:
HTML1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen" />
</head>
<body>
<div class="rectangle" id="rec1">
<div>1</div>
</div>
<div class="rectangle" id="rec2">
<div>2</div>
</div>
<div class="rectangle" id="rec3">
<div>3</div>
</div>
<div class="rectangle" id="rec4">
<div>4</div>
</div>
<div class="rectangle" id="rec5">
<div>5</div>
</div>
<div class="rectangle" id="rec6">
<div>6</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.canvas.particles.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$("#rec1").particles({
amount:10,
duration:{random:true},
speed:{speed:1},
layout:"after",
color:{random:true}
}).click(function(){
$(this).particles("stop");
});
$("#rec2").particles({
amount:2,
end:"change",
dir:{randomx:true,randomy:true},
opacity:{decay:false,animation:false},
duration:{duration:5000},
speed:{speed:1,random:true},
radius:{random:false,radius:10},
color:{color:{r:200,g:0,b:200},random:true,min:{r:200,g:200,b:0}},
bound:"bounce"
}).click(function(e){
var pos={x:e.pageX-$(this).offset().left,y:e.pageY-$(this).offset().top};
$(this).particles("add",{
position:pos,
radius:{radius:3,random:true},
duration:{duration:7000},
speed:{speed:1}
});
});
$("#rec3").particles({
amount:10,
radius:{radius:10,random:true},
opacity:{decay:true,animation:true},
duration:{duration:10000,random:true,firststep:-2000},
speed:{speed:.5,random:true},
end:"remove",
position:{x:100,y:60},
color:{color:{r:0,g:100,b:150},random:true,min:{r:0,g:50,b:100}}
}).click(function(){
var imgrandom=Math.floor(Math.random()*3);
$(this).particles("add",{
position:{random:true},
color:{
color:{r:123}
},
radius:{radius:10},
duration:{duration:10000},
speed:{speed:2},
opacity:{animation:false,decay:false},
image:imgrandom==0?"images/1.png":imgrandom==1?"images/2.png":"images/3.png",
end:"change",bound:"bounce"
});
});
$("#rec4").particles({
amount:20,
radius:{radius:10,random:true},
opacity:{decay:true,animation:true},
duration:{duration:10000,random:true,firststep:-1000},
speed:{speed:1.5,random:true},
end:"remove",
position:{x:0,y:0},
color:{color:{r:0,g:0,b:150},random:true,min:{r:0,g:0,b:100}},
dir:{
x:1,
y:1,
xrand:false,
yrand:true,
rand:true
}
});
$("#rec5").click(function(){
var position={x:$(this).width(),y:$(this).height()};
if(this.parts&&this.parts.part.length==0){
$(this).particles("destroy");
}
if(!this.parts){
$(this).particles({
amount:10,
radius:{radius:10,random:true},
opacity:{decay:true,animation:true},
duration:{duration:10000,random:false,firststep:-1000},
speed:{speed:3.5,random:true,min:1},
end:"remove",
position:position,
color:{color:{r:0,g:100,b:0}},
dir:{
x:-1,
y:-1,
xrand:false,
yrand:false,
rand:false,
xfunction:function(dx,px,dy,py,s,w,h,step){
return 175+50*Math.cos(2*Math.PI*(step*s)/600)
},
yfunction:function(dx,px,dy,py,s,w,h,step){
return 100+50*Math.sin(2*Math.PI*(step*s)/600)
}
}
});
}
});
$("#rec6").click(function(){
if(this.parts&&this.parts.part.length==0){
$(this).particles("destroy");
}
if(!this.parts){
$(this).particles({
amount:0,
radius:{radius:10,random:false},
opacity:{decay:false,animation:false},
duration:{duration:3000,random:false,firststep:0},
speed:{speed:3,random:true,min:2},
position:{x:0,y:0},
image:"images/4.png",
dir:{
x:1,
y:1,
xrand:false,
yrand:false,
rand:false,
xfunction:function(dx,px,dy,py,s,w,h,step){
if(px<w){
return px+=dx*s
}
else{
return px==-200
}
},
yfunction:function(dx,px,dy,py,s,w,h,step){
if(py<h+100){
return py+=dy*s
}
else{
return py==-50
}
}
},
bound:false,
layout:"after"
});
for(var i=0;i<50;i++){
$(this).particles("add",{
radius:{radius:Math.random()*10+2},
speed:{speed:Math.random()*1+2},
position:{x:Math.random()*$(this).width(),y:Math.random()-400}
});
}
}
});
});
</script>
</body>
</html>
jquery.canvas.particles.js
$.fn.particles=function(method){
var pi=2*Math.PI;
var frames=1000/60;
var defaults={
amount:10,
stop:false,
end:"change",
dir:{
x:1,
y:1,
xrand:true,
yrand:true,
rand:true,
xfunction:function(dx,px,dy,py,s,w,h){return px+=dx*s;},
yfunction:function(dx,px,dy,py,s,w,h){return py+=(Math.sin(2*Math.PI*(px/w))*(dy*s))}
},
image:false,
radius:{
radius:5,
random:false,
min:3
},
duration:{
duration:10000,
random:false,
min:1000,
firststep:-2000
},
speed:{
speed:1,
random:false,
min:.2
},
opacity:{
opacity:1,
random:false,
min:0,
animation:true,
decay:true
},
position:{
x:0,
y:0,
random:false
},
color:{
color:{r:255,g:255,b:255},
random:false,
min:{r:0,g:0,b:0}
},
layout:"before",
bound:"back"//,bounce,false
};
var requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(callback){
var id=window.setTimeout(callback,frames);
return id;
};
})();
var cancelAnimationFrame=(function(){
return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||
function(id){
clearTimeout(id);
};
})();
var methods={
init:function(opt){
opt=$.extend(true,{},defaults,opt||{});
return this.each(function(){
var el=$(this);
var o=$.extend({},opt);
if(o.image){
var src=o.image;
o.image=new Image();
o.image.src=src;
}
o.part=[];
o.canvas={};
o.canvas.width=el.width();
o.canvas.height=el.height();
var canvas=$("");
if(o.layout=="before"){
el.append(canvas);
}
else if(o.layout=="after"){
el.prepend(canvas);
}
var ctx = canvas.get(0).getContext("2d");
o.canvas.ctx=ctx;
o.canvas.object=canvas;
this.parts=o;
for(var i=0;i=o.duration.duration){
o.step=o.duration.firststep;
if(o.end=="remove"){
o.remove=true;
}
else if(o.end=="change"){
randomdir();
var rand=Math.random();
o.duration.duration=o.duration.random?parseInt(Math.random()*e.max)+e.min:o.duration.duration;
o.radius.radius=o.radius.random?(Math.random()*e.radius)+defaults.radius.min:o.radius.radius;
o.speed.speed=o.speed.random?(Math.random()*e.speed)+defaults.speed.min:o.speed.speed;
o.opacity.opacity=o.opacity.random?(Math.random()*e.opacity)+defaults.opacity.min:o.opacity.opacity;
o.color.color=o.color.random?{
r:parseInt(rand*(defaults.color.color.r-defaults.color.min.r)+defaults.color.min.r),
g:parseInt(rand*(defaults.color.color.g-defaults.color.min.g)+defaults.color.min.g),
b:parseInt(rand*(defaults.color.color.b-defaults.color.min.b)+defaults.color.min.b)
}:o.color.color;
e.half=o.duration.duration/2;
}
}
else if(o.dir.rand&&o.step>0&&(o.step%60)==0&&Math.floor(Math.random()*2)==1){
randomdir();
}
o.alpha=o.opacity.animation?o.opacity.decay?o.stepdefaults.canvas.width+o.radius.radius+2?-o.radius.radius:(o.position.x<-(o.radius.radius+2))?defaults.canvas.width+o.radius.radius:o.position.x;
if(!o.image){
o.position.y=o.position.y>defaults.canvas.height+o.radius.radius+2?-o.radius.radius:(o.position.y<-(o.radius.radius+2))?defaults.canvas.height+o.radius.radius:o.position.y;
}
else{
o.position.y=o.position.y>defaults.canvas.height+o.radius.radius*o.image.height/o.image.width+2?-o.radius.radius*o.image.height/o.image.width:(o.position.y<-(o.radius.radius*o.image.height/o.image.width+2))?defaults.canvas.height+o.radius.radius*o.image.height/o.image.width:o.position.y;
}
}
else if(o.bound=="bounce"){
if(o.position.x+o.radius.radius>=defaults.canvas.width){
o.position.x+=-o.speed.speed;
o.dir.x=-1;
}
else if(o.position.x<=o.radius.radius){
o.position.x+=o.speed.speed;
o.dir.x=1;
}
if(!o.image){
if(o.position.y+o.radius.radius>=defaults.canvas.height){
o.position.y+=-o.speed.speed;
o.dir.y=-1;
}
else if(o.position.y<=o.radius.radius){
o.position.y+=o.speed.speed;
o.dir.y=1;
}
}
else{
if(o.position.y+o.radius.radius*o.image.height/o.image.width>=defaults.canvas.height){
o.position.y+=-o.speed.speed;
o.dir.y=-1;
}
else if(o.position.y<=o.radius.radius*o.image.height/o.image.width){
o.position.y+=o.speed.speed;
o.dir.y=1;
}
}
}
if(o.image){
defaults.canvas.ctx.save();
defaults.canvas.ctx.translate(o.position.x, o.position.y);
defaults.canvas.ctx.globalAlpha=o.alpha;
defaults.canvas.ctx.drawImage(o.image,-o.radius.radius,-o.radius.radius*o.image.height/o.image.width,o.radius.radius*2,(o.radius.radius*2)*o.image.height/o.image.width);
defaults.canvas.ctx.restore();
}
else{
defaults.canvas.ctx.beginPath();
defaults.canvas.ctx.arc(o.position.x,o.position.y,o.radius.radius,0,pi, false);
defaults.canvas.ctx.fillStyle = "rgba("+o.color.color.r+","+o.color.color.g+","+o.color.color.b+","+o.alpha+")";
defaults.canvas.ctx.fill();
}
o.step++;
}
defaults.part.push(o);
});
},
stop:function(){
return this.each(function(){
var el=this;
if(el.parts.stop==false){
el.parts.stop=true;
cancelAnimationFrame(el.parts.requestid);
}else{
el.parts.stop=false;
methods["step"].apply($(el));
}
});
},
step:function(){
return this.each(function(){
var el=this;
if(el.parts&&el.parts.stop==false){
var rarray=[];
el.parts.canvas.ctx.clearRect(0,0,el.parts.canvas.width,el.parts.canvas.height);
$.each(el.parts.part,function(i,n){
n.update();
if(!n.remove){
rarray.push(n);
}
});
el.parts.part=rarray;
el.parts.requestid=requestAnimFrame(function(){
methods["step"].apply($(el));
});
}
});
},
destroy:function(){
return this.each(function(){
var el=this;
methods["stop"].apply($(el));
el.parts.canvas.object.remove();
delete el.parts;
});
}
};
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof method==='object'||!method){
return methods.init.apply(this,arguments);
}else{
$.error('Method '+method+' does not exist on jQuery.particles');
}
};
stylesheet.css
.rectangle{
width:350px;
height:200px;
margin:10px;
float:left;
position:relative;
display:block;
background:#f0f0f0;
border:1px solid #777777;
overflow:hidden;
}
.rectangle div{
font-size:50px;
color:#555555;
position:relative;
top:75px;
text-align:center;
}
.particles{
position:absolute;
top:0px;
left:0px;
}
