Category Archives: html5

Static text fill using HTML5 Canvas.


Making the transparent letter was discussed and source code shown several weeks ago.  Animated Text Fill but no link was created demonstrating the effect. The desired effect is of course to make the text stand out and be read / recalled for a longer period of time. Movement grabs attention. A simple static fill can be used for the

<canvas id="fill" width="960" height="300"></canvas>

In the example created the width is now 400 with a height of 200 the id is now static

<canvas id="static" width="400" height="200"></canvas>

the script to create the static is

<script>
function noise() {
 	var idstatic = document.getElementById("static");
	var ctxstatic = idstatic.getContext("2d");

   	var TempImage = ctxstatic.getImageData(0, 0, 400, 200);
 	var ImgData = TempImage.data;
 	for (var y = 0; y < 200; y += 1) {
		for ( var x = 0 ; x < 400 ; x += 1 ) {
			var i = (x * 4) + (y * 400 * 4);
			r = Math.random();
			var v = 64+(Math.floor(196 * r ));
			ImgData[i] = v;
			ImgData[i+1] = v;
			ImgData[i+2] = v;

			ImgData[i+3] = 255;
		}
 	}
 	ctxstatic.putImageData(TempImage, 0, 0);
	setTimeout(noise, 30);
}

  	noise(); 

</script>
It is being demonstrated at http://wsmith-animations.tk/canvas/

Performance is a marketing advantage


One of the major reasons why people click the back button, after finding a site via searching the web, is because the site loads to slowly. Google uses performance as one of its algo keys in ranking sites. How many visitors hit the back button and return to Google is also measured but this data is very quote noisy for ranking sites – none the less it is available to Google for quality control of other algos used to rank sites.

Flash is a major cause of sites loading slowly. HTML5 and Ajax provide alternatives to flash. By using Ajax with animation, which provide a media rich web experience, resources are delayed until the basic page is loaded and the browser becomes responsive.

Continue

The question of what can you do with flash and not html5 is now mute.


Google has released a web tool that converts SWF 8 and ActionScript 2.0 into a html5 document that will work with devices that do not have a Flash player (such as iPhones and iPads).

http://swiffy.googlelabs.com/

Now the 3d animation wars are starting to heat up.

Animated text fill using HTML5 Canvas


fillStyle with the opacity set to zero will not (using fillText) poke a hole to the html layer underneath. None the less using green screening it is possible to make transparent lettering so that the fill of the lettering can be animated.

The HTML I will use for this example is …

<style>
#green, #fill, #top{
	position:absolute;
	top:0px;
	left:0px;
}
#wrapper {
	position:relative;
	width:960px;
	height:300px;
}
</style>
<div id="wrapper">
<canvas id="green" width="960" height="300"></canvas>
<canvas id="fill" width="960" height="300"></canvas>
<canvas id="top" width="960" height="300"></canvas>
</div>

Three canvas elements are not needed but it makes the process easy to visualize and troubleshoot.

For the proof of concept all that is needed is a plain fill –

<script>
	var canvasfill = document.getElementById('fill');
 	var ctxfill = canvasfill.getContext('2d');

	ctxfill.fillStyle = "#88f";
	ctxfill.fillRect(0,0,960,300);
</script>

The fill can be any html content or video. The background for the main canvas will start as white – it really does not matter because when we do the lettering the only thing that will change is that certain pixels will become transparent.

<script>
	var canvastop = document.getElementById('top');
 	var ctxtop = canvastop.getContext('2d');

	ctxtop.fillStyle = "#fff";
	ctxtop.fillRect(0,0,960,300);
</script>

Black lettering on a white background produce the best anti-aliasing results. Anti-aliasing removes pixel level corners.

<script>
	var canvasgreen = document.getElementById('green');
 	var ctxgreen = canvasgreen.getContext('2d') ;

// antialiasing works best with black letters on a white background.

	ctxgreen.fillStyle = "#ffffff";
	ctxgreen.fillRect(0,0,960,300);

 	ctxgreen.fillStyle = "#000000";
 	ctxgreen.font = "60px Arial";
 	ctxgreen.fillText("Transparent text shows",25,100);
 	ctxgreen.fillText("Animatable fill layer",25,200);
</script>

The function that is called to make the black lettering transparent only needs to copy the green channel from the green screening canvas to the apha channel of the top canvas.

<script>
// moves ctxgreen green channel to the alpha channel of ctxTop
function BlackTransparent() {

	var sourceimg = ctxgreen.getImageData(0, 0, 960, 300);
	var sourcedata = sourceimg.data;
	var targetimg = ctxtop.getImageData(0, 0, 960, 300);
	var targetdata = targetimg.data;

	for (var i = 0, n = sourcedata.length; i < n; i += 4) {
		targetdata[i+3] = sourcedata[i+1];
	}
	ctxtop.putImageData(targetimg , 0, 0);

}
BlackTransparent()
</script>

That is it.

All that is left to do is animate the fill canvas to create text effects better than those seen on TV which are beginning to look more and more like web sites everyday.

html5shiv brings HTML5 to IE8


Google’s html5shiv it is not a complete solution but it does make the transition from xhtml IE6-8 to html5 more compatible with older IE installations.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Multiple element synchronized flash like animations


One of the talking points to using HTML5 animation is that it removes animations from within the flash box. On SEO and Search Engine Marketing at San Diego Freelance HTML5 and canvas are working together to animate outside of the flash box.


if (currentframe == 900) {

cback.clearRect (0, 0 , 500, 300);

cback.fillStyle = "#ffcc99";

cback.font = "50px Arial";

cback.shadowColor = "#000000";

cback.shadowBlur = 7;

cback.shadowOffsetX = 4;

cback.shadowOffsetY = 4;

cback.fillText("Local Search", 5, 55);

$('#offpage').css('background', '');

$('#local').css('background', 'blue');

}

Specifically times the canvas display of Local Search with a jQuery call to change the background of that menu item – shifting the menu focus from Offpage to local synchronized with the materials being shown in the canvas.

The method of placing information into a canvas animation helps the SEO process itself be removing repeat quotations from the page.

Using HTML5 Canvas image animation on facebook pages


To use (animate) HTML5 canvas images on facebook the images need to be converted to base64 – Base 64 encoder and use a data uri for the image – because the Canvas requires the image come from the same domain as the html5 script and when using facebook with iframes the domain for the image on facebook would not be the same domain as the iframe or fbml domain … CDN are in use with facebook images.

Update: Progressive Content – Ajax on facebook

One of the differences between the old and the new facebook API is Iframes. By using Iframes content can be used from any host where one can place a 520 x 800 (or with 8 pixel margin 504 x 784) document. The limitations of content is limited only by facebook policy. If there is something in the older API that can not be done with the newer API I am at a lose to identify it — other than the difference it makes for SEO.

Rotating border created with jQuery and a image


One of the many effects seen on TV is border animation for text boxes. For website applications this is ideal for places that the designer wants to bring people’s attention to such as a “click here to get a free quote” – Examples posted on http://wsmith-animations.cz.cc/

Here is the coding:

<style>

.rounded-corners {

-moz-border-radius: 30px; /* Firefox */

-webkit-border-radius: 30px; /* Safari, Chrome */

border-radius: 30px; /* CSS3 */

}

</style>

<div style=”position:relative; width:200px; height:200px; overflow:hidden; ” >

<img src=”light.png” style=” width:300px; height:300px; position:relative; left:-50px; top:-50px;” id=”rot”>

<!– center image in divide –>

<div style=”position:absolute; top:5px; left:5px; color:white; background:blue; width:190px; height:190px; “>

<!– overlay content on top of image so rotating image becomes border –>

</div>

</div>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script&gt;
<!– cross browser CSS for rotation handled by jQuery with Canvas and VML fallbacks–>

<script src=”jQueryRotate.2.1.js“></script>

<script>

var angle = 0;

setInterval(function(){

angle+=3;

$(“#rot”).rotate(angle);},50);

</script>

Fall backs for browsers that do not support CSS image rotation are Canvas and for IE VML. Note: Canvas and VML are only able to rotate images not divides with backgrounds.

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>

Animated menu buttons with html5 canvas.


Watching baseball yesterday they had many different video effects for the various text element boxes. Many of them are based on a sweep of light or a path of light across the element to bring attention to it. Canvas can do these effects very easily … below is the source code and the example is on http://wsmith-animations.tk/

By having the button animation be part of the page that means that interaction with another element of the screen can start the event.
<style>

/* button needs to have position relative to hold overlaying content */

.button {

width:160px;

height:45px;

background:#800;

color:white;

position:relative;

}

/* button divides both start at zero top and left inside the .button class divide */

.button div {

position:absolute;

top:0px;

left:0px;

padding:0px;

}

/* text is offset in the button note item CSS overrides class CSS */

#textOffset {

top:10px;

left:10px;

}

</style>
<div>

<div> <canvas id=”canvas1″ width=”160″ height=”45″>

<!– canvas width sets both CSS and width for javascript (they can be different) –>

</canvas>

</div>

<div id=”textOffset” >

Item

</div>

</div>
<script >
// set up loop
function newFrame() {

frame++;

if (frame > 300) { frame = 0; }

// slow fade: lower alpha by 16 every 25 milliseconds

var TheImage = ctx1.getImageData(0, 0, 160, 45);

var jpgdata = TheImage.data;

for (var i = 0, n = jpgdata.length; i < n; i += 4) {

jpgdata[i+3] = jpgdata[i+3]-16;

if (jpgdata[i+3] < 0) { jpgdata[i+3] = 0 }

}

ctx1.putImageData(TheImage, 0, 0);

// draw box at frames 101 though 120 progressive from left to right based on frame count.

if (frame > 100 && frame < 121) {

var left = (frame – 101) * 8 ;

ctx1.fillStyle = “rgb(0,0,255)”;

ctx1.fillRect(left,0,8,45);

}

setTimeout(newFrame, 25); // max fps is 40

}

// test for canvas setup and begin animation loop if exists.

var Canvas1 = document.getElementById(‘canvas1’);

if (canvas1.getContext){

var ctx1 = canvas1.getContext(‘2d’);

var frame = 0;

newFrame();

}
</script>