HTML5 Canvas Animated Fire menu button


Fire animation is accomplished by having a loop image rotate and become transparent as it gets to the top. Each frame is made by hand or in this case by HTML5 Canvas.  Like the last post an example is posted on http://wsmith-animations.tk/

The fire loop is nothing but a photoshop cloud rendering with red and transparent. Then the top 1/2 is copied to the clip board and the image flipped then the top is placed back on the top 1/2 giving a mirror image on the top and bottom of the image.

<style>

.fire-button {

background:#aaf;

width:150px;

height:

40px;

position:relative;

}

.fire-button div {

position:absolute;

top:0px;

left:0px;

}

#offset {

top:10px;

left:30px;

}

</style>
<div class=”fire-button”>

<div>

<canvas id=”fire” width=”150″ height=”40″></canvas>

</div>

<div id=”offset”>

Hot Item

</div>

</div>

<img id=”fire-source” src=”fire.png” style=”float:right; display:none;”>

<script>

function Fire() {

// var fire1 = document.getElementById(“fire-source”);
var top = fireframe+560;
cfire.fillRect(0,0,150,40);

if (fireframe < 40) {

cfire.drawImage(fire1, 0,600+fireframe-40,200,40-fireframe, 0,0,150,40-fireframe);
cfire.drawImage(fire1, 0,0,200,fireframe,  0,40-fireframe,150,fireframe);

}
if (fireframe > 39 ) {

cfire.drawImage(fire1, 0,fireframe-40,200,40, 0,0,150,40);

}

if (fireframe == 600)  {

fireframe = 0;

}

// Fire fades as it rises

var TheImage = cfire.getImageData(0, 0, 150, 40);
var jpgdata = TheImage.data;

for (var y = 0; y < 40; y += 1) {

progress = 1 – ( ( 40 – y ) / 39 );

for ( var x = 0 ; x < 150 ; x += 1 ) {

i = (x * 4) + (y * 150 * 4);

jpgdata[i+3] = jpgdata[i+3] * progress;

}

}

cfire.putImageData(TheImage, 0, 0);
fireframe++;
setTimeout(Fire, 25);
}

</script>

<script >

var fireframe = 0;
var fire1 = document.getElementById(“fire-source”);
var canvas = document.getElementById(‘fire’);

if (canvas.getContext) {

var cfire = canvas.getContext(‘2d’);
cfire.fillStyle = “rgba(0,0,0,0)”;
cfire.fillRect(0,0,150,40);
Fire();

}

</script>

Advertisements

One response

  1. […] I have the animated fire button on facebook being displayed to people who like wsmith design as the proof of […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: