Ajax Loader
HTML 
<canvas id="canvas" width="600" height="300"></canvas>
1
<canvas id="canvas" width="600" height="300"></canvas>
 
CSS 
h1 {
1
h1 {
2
  font-family: 'Comic Sans MS', Verdana;
3
  color: #f06;
4
}
 
JavaScript 
window.onload = function(){
1
window.onload = function(){
2
      var canvas = document.getElementById("canvas");
3
      var ctx = canvas.getContext("2d");
4
5
      var W = canvas.width;
6
      var H = canvas.height;
7
8
      var tcanvas = document.createElement("canvas");
9
      var tctx = tcanvas.getContext("2d");
10
      tcanvas.width = W;
11
      tcanvas.height = H;
12
13
14
      total_area = W*H;
15
      total_particles = 1000;
16
      single_particle_area = total_area/total_particles;
17
      area_length = Math.sqrt(single_particle_area);
18
      console.log(area_length);
19
20
      var particles = [];
21
      for(var i = 1; i <= total_particles; i++)
22
      {
23
        particles.push(new particle(i));
24
      }
25
26
      function particle(i)
27
      {
28
        this.r = Math.round(Math.random()*255);
29
        this.g = Math.round(Math.random()*255);
30
        this.b = Math.round(Math.random()*255);
31
        this.alpha = 1;
32
        //this.color = "rgb("+r+", "+g+", "+b+")";
33
34
        this.x = (i*area_length)%W;
35
        this.y = (i*area_length)/W*area_length;
36
        //console.log(W+"%("+i+"*"+area_length+"/2) = "+this.x+", "+this.y);
37
38
        this.radius = 2+Math.random()*8;
39
      }
40
41
      var positions = [];
42
      function new_positions()
43
      {
44
        tctx.fillStyle = "white";
45
        tctx.fillRect(0, 0, W, H)
46
        tctx.fill();
47
48
        tctx.font = "bold 350px arial";
49
        text = Math.round(100 + Math.random()*899);
50
        tctx.strokeStyle = "black";
51
        tctx.strokeText(text, 5, 275);
52
53
        image_data = tctx.getImageData(0, 0, W, H);
54
        pixels = image_data.data;
55
        positions = [];
56
        for(var i = 0; i < pixels.length; i = i+4)
57
        {
58
          if(pixels[i] != 255 && pixels[i+1] != 255 && pixels[i+2] != 255)
59
          {
60
            position = {x: i/4%W, y: i/4/W}
61
            positions.push(position);
62
          }
63
        }
64
65
        get_destinations();
66
      }
67
68
      function draw()
69
      {
70
        ctx.fillStyle = "white";
71
        ctx.fillRect(0, 0, W, H)
72
        ctx.fill();
73
 
74
        for(var i = 0; i < particles.length; i++)
75
        {
76
          p = particles[i];
77
78
          ctx.beginPath();
79
          ctx.fillStyle = "rgb("+p.r+", "+p.g+", "+p.b+")";
80
          ctx.fillStyle = "rgba("+p.r+", "+p.g+", "+p.b+", "+p.alpha+")";
81
          //ctx.fillRect(p.x, p.y, p.radius, p.radius);
82
          ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
83
          ctx.fill();
84
85
          p.x += (p.dx-p.x)/10;
86
          p.y += (p.dy-p.y)/10;
87
        }
88
      }
89
90
      function get_destinations()
91
      {
92
        for(var i = 0; i < particles.length; i++)
93
        {
94
          pa = particles[i];
95
          particles[i].alpha = 1;
96
          var distance = [];
97
          nearest_position = 0;
98
          if(positions.length)
99
          {
100
            for(var n = 0; n < positions.length; n++)
101
            {
102
              po = positions[n];
103
              distance[n] = Math.sqrt((pa.x-po.x)*(pa.x-po.x) + (pa.y-po.y)*(pa.y-po.y));
104
              if(n > 0)
105
              {
106
                if(distance[n] <= distance[nearest_position])
107
                {
108
                  nearest_position = n;
109
                }
110
              }
111
            }
112
            particles[i].dx = positions[nearest_position].x;
113
            particles[i].dy = positions[nearest_position].y;
114
            particles[i].distance = distance[nearest_position];
115
116
            var po1 = positions[nearest_position];
117
            for(var n = 0; n < positions.length; n++)
118
            {
119
              var po2 = positions[n];
120
              distance = Math.sqrt((po1.x-po2.x)*(po1.x-po2.x) + (po1.y-po2.y)*(po1.y-po2.y));
121
              if(distance <= 5)
122
              {
123
                positions.splice(n, 1);
124
              }
125
            }
126
          }
127
          else
128
          {
129
            //particles[i].alpha = 0;
130
          }
131
        }
132
      }
133
      function init()
134
      {
135
        new_positions();
136
        setInterval(draw, 16.67);
137
        setInterval(new_positions, 2000);
138
      }
139
140
      init();
141
    }
 

Cool Canvas Particles Text Effect

CSSDeck G+