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:

Show Text

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!