Dissolving text effect

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-05-12 19:05:01

IE5+ Opr7+

Dissolving text effect

Note: Modified by to run only in IE 5 (for sake of 100% compatibility).

Description: This is a great DHTML script that rotates and displays any number of messages, with a unique dissolving effect applied during each rotation. The effect is archived by first positioning a semi transparent, "spotty" image behind the message, and performing a "wipe" action over it (see documentation inside script). As seen below, the result is nothing short of spectacular...

Note that this script requires that the text to be displayed be absolutely positioned on the page. In plain English, that means you'll need to specify exactly a left and top coordinate (relative to the page) when defining where the text should appear.

Demo:

Directions

Before anything else, you'll need to first copy and upload the below image into your webpage directory:

Dissolving-text-effect/slidefader.gif

Step 1: Add the below to the <head> section of your page:

Select All
<style type="text/css"> .textstyle { position:absolute; left:-2000px; width:400px; font-family:Arial; font-size:20pt; font-weight:bold; text-align:center; color:FFFFFF; filter:glow(color=red,strength=2); } .coverstyle { position:absolute; left:-2000px; } </style> <script LANGUAGE="JavaScript1.2"> var message = new Array() message[0]="Welcome to " message[1]="The #1 DHTML site on the net" message[2]="Here you\'ll find free DHTML scripts and components" message[3]="All of which utilize the latest in DHTML\/ JavaScript technology" message[4]="Enjoy your stay here" message[5]="And have a wonderful Christmas Holiday!" var i_message=0 // The trick of this script is a simple gif-image // consisting of two colors: black and white dots. // The black dots are transparent. // By wipeing this gif-image back and forth over the // textmessages you get an attractive dissolving effect. // This image is called Dissolving-text-effect/slidefader.gif. // Configure the left and top margin of the text (pixels). var covertop=20 var coverleft=150 // Configure the size of the wipeing gif-image. // If you change the size you should create a new image too. // The coverheight also represents the height of the textzone. var coverwidth=1200 var coverheight=96 var texttop=covertop var textleft=coverleft //configure width of text effect //be sure to change the corresponding width attribute above in the <style> tag to match var textwidth=400 var textheight=coverheight var cliptop=0 var clipright=textwidth var clipbottom=coverheight var clipleft=0 var clippoints // Configure the speeds of the wipeing effect var step=40 var pause=50 var timer function init() { if (document.all) { document.all.text.style.posTop=texttop document.all.text.style.posLeft=textleft document.all.cover.style.posTop=covertop document.all.cover.style.posLeft=coverleft clipleft=0 fadeout() } } function fadeout() { if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) { clipleft+=step clipright=clipleft+textwidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft-=step timer= setTimeout("fadeout()",pause) } else { clearTimeout(timer) i_message++ if (i_message>=message.length) {i_message=0} text.innerHTML=message[i_message] fadein() } } function fadein() { if (document.all.cover.style.posLeft <=coverleft) { clipleft-=step clipright=clipleft+textwidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft+=step timer= setTimeout("fadein()",pause) } else { clearTimeout(timer) init() } } </script>

Step 2: Copy the following to the <body> section of your page.

Step 3: Finally, insert the following codes into the <BODY> tag itself, like this:

As mentioned, since the script uses absolute positioning (as opposed to relative-absolute positioning). you need to manually set the coordinates of the animation. Check the documentation inside code of Step 1 to configure the required variables. Enjoy!

Related DHTML Scripts

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

pathGenerator	Date Added: 2007-06-16
-User Submitted _pathGenerator is an online wizard that allows anyone to easily create an animating layer that follows any desired path. Just drag your mouse to map out its course,...

VML Editor	Date Added: 2007-06-16
-User Submitted VML (Vector Markup Language) is a text based vector graphics format proprietary to Internet Explorer. Jacco has created the following powerful VML editor to allow you to use your...

Time-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is a fully customizable "time based" progress bar. Set any duration (ie: 10 seconds) for the script to finish loading the bar. A great script to prov...

Event-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control prec...

WinXP Progress Bar	Date Added: 2007-06-16
-User Submitted A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can ...

Pie Graph script	Date Added: 2007-06-16
-User Submitted This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page....

Line Graph script	Date Added: 2007-06-16
-User Submitted Based on the same library as the Pie Graph script, this is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page....

Find In Page Script	Date Added: 2007-06-16
-User Submitted This cross browser DHTML script simulates the Edit> Find In Page feature of the browser to allow your visitors to easily search for a particular text on your page.&nb...

Tip of the day dialog	Date Added: 2007-06-16
-User Submitted Provide daily tidbits of interesting information to your visitors, in an even more interesting way, with this ultimate tip of the day script!...

Copy text to clipboard script	Date Added: 2007-06-16
-User Submitted This "demo" script does two things: 1) identifies the selected text on the page 2) copies this text to clipboard. As part of a larger application...