PeterBraden.co.uk Call of Duty Text Animation

I don't play a lot of video games, but my brother does, and every now and then I get hooked on one of his games. This afternoon I completed Call of Duty 4, which is surprisingly engrossing — shooting people in the head is quite addictive.

One of the things I liked most about the game was the visual experience of the briefing/loading screens. The designers have used all the typical elements that have become associated with this spy/military thriller genre — the aerial maps, wire-frame fly-throughs, mountains of irrelavant data. All the cliches are covered.

One particular effect that caught my eye was the fade-in/fade-out on the name of the level. It seemed very reminiscent of Bourne Identity/24. I thought I'd give a go at recreating it in javascript.

Here's the code — I've wrapped up the fade-in into a jquery extension:

$.fn.stealthIn = function(callback){
	this.each(function(){
		
		var content = $(this).text();
		$(this).text("").css({
			'color' : '#9f9',
			'text-shadow' : '#0f0 0px 0px 5px',
			'font-family' :"Bank Gothic"
			}).show();
		
		var i = 0;
		var j = 1;
		var x = $(this);
		var t = setInterval(function(){
			var cont = x.text();
			
			if (j==3){	
				x.text(cont.substr(0,i) + content[i]);
				i+=1;
				j=0;
			}else{
				x.text(cont.substr(0,i) + String.fromCharCode(
					1072 + parseInt(Math.random()*20)));	
				j+=1;
			}
					
			if (i == content.length){
				clearInterval(t);
				if (callback){
					callback();
				}
			}	
		}, 20);
		
	});

}


// Use it like:
$("#some-element").stealthIn();

And here's a live example:

You'll only get the full effect if you have the font "Bank Gothic" on your computer - which I believe is bundled on a mac. Sorry PC users!