Flash headline waver javascript

Great Flash like transition effect with this cool javascript.

Flash Headline Waver Javascript
Javascript that creates a Flash like transition effect between messages.

Handy Tip: A headline that wavers the message in over time, will catch your visitors interest and deliver the message effectively in a way that will be remembered.

Bookmark This Page | Click here for more javascripts

Flash Headline Waver Effect

Original by Urs Dudli and Peter Gehrig

To View Script Example Click Here

This script creates a dynamic newsboard with a flash headline like wavy transition effect between the messages. Add as many messages as you like. Set each message to a link of its own. Crossbrowser (Netscape users will see a simple clean newsticker without special effect, works not with NN6). Easy configuration of font, fontsize, fontcolor, background color and so on.

Installation

Step 1: Open your webpage editor. Paste the following code right below the <body> tag:

( To select all; Click inside Textbox and hit your keyboards Ctrl + A )

<SCRIPT LANGUAGE="JavaScript"> 
 
" message[1]="Webhosting and Free Scripts --> " message[2]="Simply 
Super Support. --> " // the URLs of your messages var messageurl=new Array() 
messageurl[0]="http://www.hypergurl/index.html" messageurl[1]="http://www.hypergurl/index.html" 
messageurl[2]="http://www.hypergurl/index.html" // the targets of the 
links // accepted values are '_blank' or '_top' or '_parent' or '_self' // or 
the name of your target-window (for instance 'main') var messagetarget=new Array() 
messagetarget[0]="_blank" messagetarget[1]="_blank" messagetarget[2]="_blank" 
// font-size var fntsize=15 // font-color var fntcolor="FFFFFF" // font-family 
var fntfamily="Comic Sans MS" // font-weight: 1 means bold, 0 means 
normal var fntweight=1 // standstill of each message (seconds) var pause=3 // 
the color of the newsborad backgorund var backgroundcolor="36369C" // 
horizontal position of the slideshow (distance to the left margin of the browser-window, 
pixels) var posleft=10 // vertical position of the slideshow (distance to the 
top margin of the browser-window, pixels) var postop=10 // width of the textbox 
(pixels) var scrollerwidth=600 // height of the textbox (pixels) var scrollerheight=60 
// borderwidth (pixels) var scrollerborder=2 // textpadding (pixels) var textpadding=15 
// CONFIGURATION ENDS HERE // // // // // // // // // // // // // // // // // 
// // // // // // // // // // do not edit the variables below var linktext="More" 
var textwidth=scrollerwidth-(2*textpadding) var textcontent="" var bgcontent="" 
var i_message=0 var i_stepwave=0 var i_maxstepwave=20 pause=pause*1000 if (fntweight==1) 
{fntweight="700"} else {fntweight="100"} function initiate() 
{ gettextcontent() getbgcontent() if (document.all) { wavemessage.innerHTML=textcontent 
wavemessagebg.innerHTML=bgcontent wavemessagebg.style.posLeft=posleft wavemessagebg.style.posTop=postop 
wavemessage.style.posLeft=posleft+textpadding wavemessage.style.posTop=postop+textpadding 
enlargewave() } if (document.layers) { document.wavemessage.left=posleft+textpadding 
document.wavemessage.top=postop+textpadding document.wavemessagebg.document.write(bgcontent) 
document.wavemessagebg.document.close() document.wavemessagebg.left=posleft document.wavemessagebg.top=postop 
changemessage() } } function enlargewave() { if (i_stepwave<=i_maxstepwave) 
{ wavemessage.filters.wave.phase=i_stepwave wavemessage.filters.wave.strength=i_stepwave 
wavemessage.filters.wave.lightstrength=i_stepwave wavemessage.filters.wave.freq=i_stepwave 
i_stepwave++ var timer=setTimeout("enlargewave()",50) } else { clearTimeout(timer) 
changemessage() } } function reducewave() { if (i_stepwave>0) { wavemessage.filters.wave.phase=i_stepwave 
wavemessage.filters.wave.strength=i_stepwave wavemessage.filters.wave.lightstrength=i_stepwave 
wavemessage.filters.wave.freq=i_stepwave i_stepwave-- var timer=setTimeout("reducewave()",50) 
} else { clearTimeout(timer) var timer=setTimeout("enlargewave()",pause) 
} } function changemessage() { i_message++ if (i_message>=message.length) {i_message=0} 
gettextcontent() if (document.all) { wavemessage.innerHTML=textcontent reducewave() 
} if (document.layers) { document.wavemessage.document.write(textcontent) document.wavemessage.document.close() 
var timer=setTimeout("changemessage()",pause) } } function gettextcontent() 
{ textcontent="<span style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>" 
textcontent+="<font color="+fntcolor+">"+message[i_message]+"</font> 
" textcontent+="<a href="+messageurl[i_message]+" target="+messagetarget[i_message]+"> 
" textcontent+="<font color="+fntcolor+">"+linktext+"</font></a></span>" 
} function getbgcontent() { bgcontent="<table width="+scrollerwidth+" 
height="+scrollerheight+" border="+scrollerborder+"><tr><td 
bgcolor="+backgroundcolor+"> </td></tr></table>" 
} window.onload=initiate // - End of JavaScript - --> </SCRIPT> <DIV 
ID="wavemessagebg" style="position:absolute;"></DIV> 
<DIV ID="wavemessage" style="position:absolute; filter:wave()"></DIV>

IMPORTANT: Do not paste this code into tables or between <DIV> tags or any other container tags!

Step 2: Go to the top of the script to configure the font attributes, the colors as well as the size and the position of the newsboard. (Just follow the instructions within the script.)

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name
Click for more info!

Home