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.
<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