Dynamic Drive- In-your-face message greeting!

New Revised CSS Library Forums Web Tools

In-your-face message greeting!

Author: Steve Bomer

Notes: Modified by Dynamic Drive for NS6, ability to configure color

Description: "I created this script to allow you to give your surfers a unique and warm welcome when they enter your site! The idea behind this script is actually quite simple- By using dynamic content and fontsize manipulation, I created a text that appears to "zoom-in" and expand, by continuously refreshing the text so it's larger each time. Hope you enjoy it (and your surfers too) !" -Steve Bomer

Demo: You can't miss it!

Directions

Step 1: Copy the below code and paste it right below the <body> tag of the page that will show the message, before any other tags:

Select All
<div style="position:absolute;color:black" id="test"></div> <script> //This script created by Steve Bomer (steveb03@yahoo.com) //Modified by Dynamic Drive for NS6, additional features //Visit Dynamicdrive.com to get it! //Change the message below var themessage="Welcome to Dynamic Drive!" var fontsize=10 //Below determines how long the message will appear before disappearing. 3000=3 seconds var appearfor=3000 function position_at_top(){ if (document.layers) document.test.top=pageYOffset else if (document.all){ test.innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>' setTimeout("test.style.top=document.body.scrollTop+10;test.style.left=document.body.scrollLeft+10",100) } else if (document.getElementById){ document.getElementById("test").innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>' document.getElementById("test").style.top=pageYOffset } } function expand(){ if (document.layers){ document.test.document.write('<div align=center style="font-size:'+fontsize+'px"><font face="Arial">'+themessage+'</font></div>') document.test.document.close() } else if (document.all) test.style.fontSize=fontsize+'px' else if (document.getElementById) document.getElementById("test").style.fontSize=fontsize+'px' fontsize+=5 if (fontsize>90){ if (document.layers) setTimeout("document.test.visibility='hide'",appearfor) else if (document.all) setTimeout("test.style.visibility='hidden'",appearfor) else if (document.getElementById) setTimeout("document.getElementById('test').style.visibility='hidden'",appearfor) return } else setTimeout("expand()",50) } </script>

Step 2: Add the below event handler to the <body> tag, like the following:

<body onload="position_at_top();expand()">

You're done!