radikalFX

About

RadikalFX is the personal outlet of Berry de Vos. This is the place were I write about the technology that I come across and stuff I have discovered on the inter tubes. More...

17
Oct

Animated website background with HTML5

After fooling around with some of the basic HTML5 Canvas features for my previous post, I decided to also work out some other ideas I had. Today I started implementing a simple animated background for a website.

Animated webpage background with HTML5
Click here for the demo


Using a Canvas Object as a background
Before actually getting to the animating of the background, I first had to setup Canvas as a background object. In order to do this. I have added the Canvas element in an absolute positioned div that is aligned to the top of the page. The reason for using a div around the Canvas is because the browsers don’t seem to want to put the Canvas in page at 100% without creating scrollbars.

After placing the background a div can be placed on top. When this div is created with a max-height of 100% and overflow set to auto. This layer will automatically give a scrollbar when necessary.

So that leaves us with the following HTML and CSS code:

<body>
	 <div id="backgroundHolder">
	 	 <canvas id="backgroundCanvas" width="800" height="600"></canvas>
	 </div>
	 <div id="realbody">
	 	 <!-- Content -->
	 </div>
</body>

CSS:

#backgroundHolder {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #999;
}
#realbody {
	position: absolute;
	top: 0;
	width: 100%;
	overflow: auto;
	max-height: 100%;
}
canvas {
	width: 100%;
	height: 100%;
}

Let the browser resize the Canvas
When I created the first setup for this demo. I started by setting the height and width of the Canvas to the height and width of the page. This soon turned out to be quite heavy on the CPU usage at higher resolutions. So I made the Canvas a static size and let the browser resize the area to 100%. This works and performs way better. And because the animated content is abstract it does not really matter that we loose the aspect ratio.

Once you have setup the Canvas behind the page. You can draw whatever you want in this Canvas and it will render behind the normal content in the browser.

How to animate the background
Now that we have done the setup for the page, we can start to animate. I created some really simple code which doesn’t do very proper checking on the boundaries. It basicly switches 3 variables around to make the background animated: move the bars from right to left, change the rotation of the Canvas context from (π / 32) to -(π / 32), and fade the color between an array of colors.

Drawing the bars
The bars are just drawn rectangles which are drawn a little bit above the canvas till a little bit below the Canvas, this is because of the rotation. In order to draw the bars I use the following code:

for (var i = leftOffset; i < canvas.width + 600; i += (BAR_WIDTH * 2)) {
	context.fillRect(i - (canvas.width / 2), 0 - (canvas.height / 2) - 200, BAR_WIDTH, canvas.height + 400);
}
leftOffset -= BAR_SPEED;
if (leftOffset + BAR_WIDTH * 2 + 300 < 0) {
	leftOffset += BAR_WIDTH * 2;
}

The BAR_SPEED is to move the initial leftOffset to the left all the time. Up till it reaches a certain value. Then the leftOffset is scaled up a little so that we don’t create more and more bars over time. The starting point of the context.fillRect might seem a bit weird. This is because the Canvas is translated to the center. So the starting point for drawing a bar is minus the width of the Canvas area.

Rotating the bars
Rotating the bars is even simpler then the drawing of them. We can just use the context.rotate function to set the rotation of the content that we are drawing. Keep in mind that you might want to save the context state before rotating so you can restore it after the rotation. The JavaScript code for rotating is the following:

context.save();
context.rotate(angle += angleAdjust);
// Draw your content here
if (angle > MAX_ANGLE || angle < 0 - MAX_ANGLE) {
	angleAdjust = 0 - angleAdjust;
}

In the example above MAX_ANGLE is set to π / 32. The variable angleAdjust is used to make sure that we either increase the angle or decrease the angle.

Switching the colors
The effect to finish the whole thing of, is the switching of colors. For this demo I am using 6 colors that I just guessed some RGB values for. Blending the colors is done with this Color object in JavaScript:

function Color(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
 
	this.step = COLOR_STEP;
 
	this.fadeTo = function(color) {
		this.r = this.r + ((color.r - this.r) * this.step);
		this.g = this.g + ((color.g - this.g) * this.step);
		this.b = this.b + ((color.b - this.b) * this.step);
 
		this.step += COLOR_STEP;
 
		if (this.r == color.r &&
				this.g == color.g &&
				this.b == color.b) {
 
			this.step = COLOR_STEP;
			return true;
		}
		return false;
	}
 
	this.getRGB = function() {
		return Math.round(this.r) + "," +
				Math.round(this.g) + "," +
				Math.round(this.b);
	}
}

Every time the fadeTo method is called, the color that is used will blend more to the color provided as an argument to the fadeTo method. If color provided as a parameter is the same as the color. Then this method will return true so the rest of the code can start providing another color to blend to.

The code to start running through the array of colors then becomes something like this:

if (activeColor.fadeTo(colors[nextColorIndex])) {
	activeColor = colors[nextColorIndex++];
	if (nextColorIndex >= colors.length) {
		nextColorIndex = 0;
	}
}
context.fillStyle = 'rgb(' + activeColor.getRGB() + ')';

After setting this demo up today, I have to conclude that doing animations like this is really not that difficult. I think within the next few months we will see more and more awesome website implementations with Canvas.

This entry was posted on Saturday, October 17th, 2009 and is filed under Canvas, HTML5, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

24 Responses to “Animated website background with HTML5”
«
»
Powered by WordPress