In-your-face message greeting

Quick search

Scripts - DHTML

Scripts - DHTML (new)

Web Developer Blog

Web Developer Blog (new)

Scripts and Applications

Ajax
ASP
ASP.NET
C and C++
CFML
CGI and Perl
Flash
Java
JavaScript
PHP
Python
XML

Software Downloads

DHTML Scripts - Detail

Date added: 2007-04-11 09:05:42

- In-your-face message greeting!

FF1+ IE5+ Opr7+

In-your-face message greeting!

Notes: Modified by 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 id="test"></div> <script> //This script created by Steve Bomer (steveb03@yahoo.com) //Modified by for NS6, additional features //Visit Dynamicdrive.com to get it! //Change the message below var themessage="Welcome to !" 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 ><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!

Related DHTML Scripts

3D spinning message	Date Added: 2007-04-11
-User submitted 3D Spinning Message uses VML to display/rotate messages on the top of the page via a circular animation. Everything from the size of the "circle" to the colors of the text can be ...

Neon Lights Text	Date Added: 2007-04-16
-User submitted Bring the age old technique of attracting attention on the streets to your webpage! This DHTML script applies a neon light effect to any text...very cool....

Neon Lights Text II	Date Added: 2007-04-16
-User submitted Based on the original Neon Lights script, this version applies a "moving light" to any text. Two different colors can be used concurrently for the effect...

Rainbow Text	Date Added: 2007-05-12
-User submitted Utilizing IE 5's proprietary behavior functionality, Chris' script allows you to apply a live rainbow effect to any block of text, with multiple text/page supporte...

Flying letters	Date Added: 2007-05-12
-User submitted Animate your site's header into view, one letter at a time, with this one-of-a-kind script!...

Nudging Text	Date Added: 2007-05-12
-User submitted This attention craving text contains letters that constantly nudge one another....

Roller Coaster Text	Date Added: 2007-05-12
-User submitted This interesting text effect animates any text in a roller coaster style!...

Sine Scrolling Text script	Date Added: 2007-05-12
-User submitted Using some sophisticated math calculations, not to mention great DHTML programming, Mark has created this visually stunning sine scrolling text animation. The text flows...

Wave text	Date Added: 2007-05-12
-User submitted Add a watery, wavy effect to a header text with this mesmerizing script!...

Text Animator	Date Added: 2007-05-12
-User submitted Text Animator is a great cross-browser text effect. It fades in and out infinite text messages, with each message optionally being clickable....

Dissolving text effect	Date Added: 2007-05-12
-User submitted This is a great DHTML script that rotates and displays any number of messages, with a unique dissolving effect applied during each rotation. Very impressive......

Pulsating Text	Date Added: 2007-05-12
-User submitted Use this script to render an "aura" around your text, accomplished using IE's multimedia filters and scripting....

DOM Drag & Drop script	Date Added: 2007-05-12
-User Submitted This is a no fuss DOM drag script that be used on any relatively or absolutely positioned element on the page to make it instantly dragable. The script also fires 3 custom eve...

YUI Color Picker	Date Added: 2007-05-18
-User Submitted Need a color picker for your online forms or application? This advanced color picker is based on Yahoo's excellent UI library, and features a fully interactive, drag and drop...

ColorJack DHTML color picker	Date Added: 2007-05-18
-User Submitted ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps....