Ajax Loader
HTML 
<canvas id = 'canvas'></canvas>
1
<canvas id = 'canvas'></canvas>
 
CSS 
body{
1
body{
2
  margin:0;
3
}
 
JavaScript 
window.onload = init();
1
window.onload = init();
2
function init(){
3
canvas = document.getElementById('canvas');
4
context = canvas.getContext('2d');
5
canvas.width = window.innerWidth - 20;
6
canvas.height = window.innerHeight - 20;
7
canvas.addEventListener('mousemove',MouseMove,false);
8
 
9
mouse = {x:0,y:0}
10
particleHolder = [0];
11
x = 900;
12
y = 900;
13
angle = 45;
14
radius = 280;
15
particleCount = 4000;
16
color = [
17
'rgba(0, 118, 163, 0.8)',
18
'rgba(141, 198, 63, 0.8)',
19
];
20
 
21
 
22
function MouseMove(event)
23
{
24
  mouse.x = event.pageX - canvas.offsetLeft;
25
  mouse.y = event.pageY - canvas.offsetLeft;
26
}
27
for(i = 0; i < particleCount ; i++)
28
{particleHolder.push(new generateParticles());}
29
function generateParticles()
30
{
31
this.x = Math.random()*canvas.width;
32
this.y = Math.random()*canvas.height;
33
this.color = color[Math.floor(Math.random()*color.length)];
34
this.rad = Math.floor(Math.random()*8);
35
}
36
function vibrate()
37
{
38
 
39
context.fillStyle = 'white';
40
context.fillRect(0, 0, canvas.width, canvas.height);
41
for(var j = 0; j < particleHolder.length; j++)
42
{
43
var p = particleHolder[j];
44
var distanceX = p.x - mouse.x;
45
var distanceY = p.y - mouse.y;
46
particleDistance =  Math.sqrt(distanceX*distanceX + distanceY*distanceY);
47
 
48
particleMouse = Math.max( Math.min( 50 / ( particleDistance /p.rad ), 10 ), 0.1 );
49
context.fillStyle=p.color;
50
context.fillRect(p.x-((p.rad*particleMouse)/2),p.y-((p.rad*particleMouse)/2),p.rad*particleMouse,p.rad*particleMouse);
51
}
52
}
53
setInterval(vibrate, 15);
54
};
 

canvas quad

CSSDeck G+