Wednesday, January 22, 2014

Animated Site Title using java script

Its a very interesting example that how you can make your site title moveable. Its very short and easy to code using java script. Lets have a look.

<script type="text/javascript">
var rev = "fwd";
function titlebar(val)
{
    var msg  = "Your title here | Animated Title Example";
    var res = " ";
    var speed = 100;

    var pos = val;
    var le = msg.length;
    if(rev == "fwd"){
        if(pos < le){
        pos = pos+1;
        scroll = msg.substr(0,pos);
        document.title = scroll;
        timer = window.setTimeout("titlebar("+pos+")",speed);
        }
        else{
        rev = "bwd";
        timer = window.setTimeout("titlebar("+pos+")",speed);
        }
    }
    else{
        if(pos > 0){
        pos = pos-1;
        var ale = le-pos;
        scrol = msg.substr(ale,le);
        document.title = scrol;
        timer = window.setTimeout("titlebar("+pos+")",speed);
        }
        else{
        rev = "fwd";
        timer = window.setTimeout("titlebar("+pos+")",speed);
        }  
    }
}
titlebar(0);
</script>


Copy and paste the code in head section of your design(HTML) page and enjoy the moveable title of your page.

Download the HTML here.

0 comments:

Post a Comment

Popular Posts

Pageviews