A Dark and Stormy Night

This example was modified from the sitepoint article Warning: This Secret CSS Technique Will Surprise You! by By Alex Walker.
You can view his example and the technique here.

For my example, I use javascript to cause the image to change by resizing it by one pixel causing the movement he initiated by resizing the window. I then added some randomization to the page so that the lightning is not at the same time.

I am only using 2 frames, but at some point I would like to create a similar image, but with a different (second) set of lightning images. You can then randomize between the two which would allow you to be able to have even more of a storm look.

Here is the javascript code that I'm using:

var div = document.getElementById('header_outer');	// get the div as a variable
function change()
{
	div.style.width="1000px";			// resize the div
	var rand_no = Math.random();			// generates a random number
	rand_no = rand_no * 5000;			// make the random number between 0 and 5000
	rand_no = Math.ceil(rand_no);			// round it to a whole number
	setTimeout("change2()",rand_no);		// use the random number to set when to call the next lightning strike
}
function change2()
{
	div.style.width="999px";
	setTimeout("change()",200);
}


change();