Animated Welcome Massage

AbuzarSajjad · #1 (**permalink**) 02-26-2011, 10:35 AM

Animated Welcome Massage

HTML Code:

//Welcome Message - http://www.btinternet.com/~kurt.grigg/javascript  

/*
Paste this link as the last thing on your page just before </body></html>

<script type="text/javascript" src="welcomemessage.js"></script>


To edit the message and colours, right click on the welcomemessage.js file icon 
and choose edit.

Make sure the welcomemessage.js file is in/uploaded to the same directory/folder 
as the web page using it!
 


*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Welcome Message</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

</head>
<body>

<script type="text/javascript">
//Welcome Message - http://www.btinternet.com/~kurt.grigg/javascript  

if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){


if  (!window.opera){ 

(function(){

//Configure here.

var message = "Any message you want here !"; //your message.
var col = new Array('#ff0000','#00aa00','#0000ff'); //add more if needed.
var xyz = 26; //max grow size.
var spd = 30; //setTimeout speed.

//End.

var msg = message.split(" ");
var timer = null;
var clrPos = 0;
var msgPos = 0;
var jog = 1;
var currentStep = 10;
var step = 8;
var h,w,y,x,r,xy;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var running = true;
var box,txt;
var ovrflw =  (d.documentElement.style && 
typeof d.documentElement.style.MozOpacity == "string")
?"-moz-scrollbars-none":"hidden";
var idx = d.getElementsByTagName('div').length;

d.write("<div id='_box"+idx+"' style='position:absolute;top:0px;left:0px;"
+"height:10px;width:10px;text-align:center;overflow:"+ovrflw+"'>"
+"<div id='_txt"+idx+"' style='position:absolute;top:0px;left:0px;width:1px;"
+"height:1px;font-family:arial,sans-serif;font-size:1px'>.<\/div><\/div>"); 

if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
y = Math.floor(h/2);
x = Math.floor(w/2);

xy = (w >= h)?w:h;
}

function scrl(yx){
var sy,sx;
if (domSy){
 sy = r.pageYOffset;
 sx = r.pageXOffset;
 }
else{
 sy = r.scrollTop;
 sx = r.scrollLeft;
 }
return (yx == 0)?sy:sx;
}

function dsply(){
step += 15;
currentStep += step;

txt.top = y + Math.floor(-currentStep/16) + pix;
txt.left = x + Math.floor(-currentStep/2) + pix; 
txt.width = currentStep + pix;
txt.fontSize = Math.floor(currentStep/8) + pix;
txt.color = col[clrPos];
d.getElementById("_txt"+idx).firstChild.data = msg[msgPos];
if (currentStep > xy * xyz){
 currentStep = 10;
 step = 8;
 msgPos += jog;
 clrPos += jog;
}
if (clrPos >= col.length){ 
 clrPos = 0;
}
timer = setTimeout(dsply,spd);
if (msgPos >= msg.length){
 running = false;
 box.width = 1 + pix;
 box.height = 1 + pix;
 box.visibility = "hidden";
 txt.width = 1 + pix;
 txt.height = 1 + pix;
 txt.visibility = "hidden";
 clearTimeout(timer);
 }
box.top = scrl(0) + pix;
box.left = scrl(1) + pix;
}

function dims(){
if (domWw) box.width = "100%";
else box.width = w + pix;
box.height = h + pix;
}

function init(){
 winsize();
 box = document.getElementById("_box"+idx).style; 
 txt = document.getElementById("_txt"+idx).style;
 dims();
 dsply();
}

function rsz(){
 if (running){
  winsize();
  dims();
 }
}

if (window.addEventListener){
 window.addEventListener("resize",rsz,false);
 window.addEventListener("load",init,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",rsz);
 window.attachEvent("onload",init);
} 

})();
}
}//End.
</script>

</body>
</html>

--------------------------------------------------------

Click Here To View Example