Html5 Animation | Html5 Animation Example

The HTML5 canvas component is the integral variable for HTML5 to trade certain Flash activity. It permits you to fabricate dynamic, scriptable rendering of 2D shapes and bitmap pictures with JavaScript. In other words the full control over animation.

Today I am going to demonstrate an amazing example of HTML5 Animation, which will definitely control over the flash animation.

The HTML5 animation is quite an easy task, if you have basic knowledge of Canvas uses. From the initial point of the Blink Element to Canvas, it has been a wonder adventure to create some stunning example.

So here is the quick example, see it.


html5andcss3.org

Your Browser doesn’t support canvas features

Multi Color
Click on the color button to see the bubble in that color.


Download This Script

Yet the Css3 has also left an impact in the animation world. Especially with the amazing feature of 2D transition, 3D transition and key frame rotation. But HTMl5 has its own value to control over the flash animation.

Here is the one step guidance to create this stunning example of HTML5 Animation.

Create an html file, which will be built with the Canvas animation feature. There is no any extra plugin or sources are required. You can just copy or paste the entire code to run on the local computer. Or just try it with our try it editor.

<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Animation Example</title>
<script>
  var ie = false;
  var initBlobs = 30;
  var minBlobs = 15;
</script>
</head>

<body onload="init()">
 <div style="width:600px;height:400px;">
  <div style="position:absolute; top:200px; left: 230px; font-size: 24px; font-weight:normal; color: #f5f5f5; opacity: 0.2">html5andcss3.org</div>
  
  <canvas id="canv" class="output" width="600" height="400" style="width:600px;height:400px; border-radius: 100%;" onclick="blobs.push(createBlob(event));">
  <p><b>Your Browser doesn't support canvas features</b></p>
  </canvas>

  <table style="border:1px solid #00C492;">
   <tr>
    <td height="30" width="70" style="border:1px solid #00C492; font-size: 13px;" align="center"  onclick="setColor(null);"><b>Multi Color</b></td>
    <td height="30" width="70" bgcolor="#00FF00" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#ff0000" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#0000ff" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#ffff00" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#666777" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#6cb2c1" onclick="setColor(this);"/>
    <td height="30" width="70" bgcolor="#000000" onclick="setColor(this);"/>
   </tr>
  </table>

  <div style="text-align:center; margin-top:20px; color: #666; font-size: 18px;">Click on the color button to see the bubble in that color.</div>
 </div>
 <div id="debug"/>

 <script>
  var width = 600;
  var height = 400;
  var curcolor = null;
  var blobs = new Array();
  var ltime = 0;
  var ctx;
  
  function Blob(x,y,r,vx,vy,w,p,c){
   this.x = x;
   this.y = y;
   this.r = r;
   this.vx = vx;
   this.vy = vy;
   this.wobble = w;
   this.wperiod = p;
   this.color = c;
 }

 function init() {
  ltime = new Date().getTime();
  var elt = document.getElementById('canv');
  ctx = elt.getContext('2d');
  while (blobs.length < initBlobs) {
    blobs.push(createBlob(null));
  }
  setInterval("draw();", 20);
 }
 
 function draw() {
  // render background
  var g = ctx.createLinearGradient(0, 0, 0, height);
  g.addColorStop(0, '#00C492');
  g.addColorStop(1, '#00C492');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, width, height);
  var time = new Date().getTime();
  var dt = time-ltime;
  // render blobs
  for (i=0; i<blobs.length; i++) {
    var blob = blobs[i];
    var tf = time/500/blob.wperiod;
    var wf = (tf-Math.floor(tf))*3*Math.PI;
    var xw = blob.wobble*(Math.sin(wf)-1.5);
    if (!ie) {
      var rg = ctx.createRadialGradient(
        blob.x+xw+blob.r/4,blob.y-blob.r/4,blob.r/5,
        blob.x+xw,blob.y,blob.r);
      rg.addColorStop(0, '#fff');
      rg.addColorStop(0.85, blob.color);
      rg.addColorStop(1, 'rgba(0,0,128,0)');
      ctx.fillStyle = rg;
      ctx.fillRect(blob.x+xw-blob.r,blob.y-blob.r,blob.r*2,blob.r*2);
    } else { // ie
      ctx.fillStyle = blob.color;
      ctx.beginPath();
      ctx.arc(blob.x+xw,blob.y,blob.r,0,Math.PI*2,true);
      ctx.fill();
      ctx.fillStyle = 'rgba(255,255,255,1.0)';
      ctx.beginPath();
      ctx.arc(blob.x+xw+blob.r/4,blob.y-blob.r/2,blob.r/2,0,Math.PI*2,true);
      ctx.fill();
      ctx.fill();
    }
    blob.x += blob.vx;
    blob.y += blob.vy;
    if (blob.x > width+blob.r || blob.x < -blob.r
     || blob.y > height+blob.r || blob.y < -blob.r) {
      delete blob;
      if (blobs.length <= minBlobs) {
        blobs.splice(i, 1, createBlob(null));
      } else {
        blobs.splice(i, 1);
        if (i>0) i--;
      }
    }
  }
  ltime = time;
}
function createBlob(event) {
  var r = (Math.random()*41)+10;
  var x;
  var y;
  if (event == null) {
    x = Math.random()*width;
    y = height+r;
  } else {
    x = event.clientX;
    y = event.clientY;
  }
  var vx = (((Math.random()*21))-20)/10;
  var vy = -((Math.random()*15)+1)/4.0;
  if (curcolor == null) {
    var clr = "rgba(";
    for (j = 0; j < 3; j++) {
      var v = Math.floor(Math.random()*256); 
      clr += v + ",";
    }
    clr += "1.0)";
  } else {
    clr = curcolor;
  }
  var wob = Math.random()*3+0.5;
  var wp = Math.random()*wob+0.5;
  return new Blob(x, y, r, vx, vy, wob, wp, clr);

}
function setColor(elt) {
  if (elt == null) {
    curcolor = null;
  } else {
    curcolor = elt.bgColor;
  }
}
function debug(v) {
  document.getElementById('debug').innerHTML = v;
}
</script>
</body>
</html>

Download


For downloading the above html5 animation example, click anywhere on the download button. If you need any assistance with the given example, leave a comment below.



Comments are closed.

Show Buttons
Hide Buttons