« »

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.

Label: Dissolving text effect

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
HTML
Print

slidefader.gif

Copy All x2

<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script LANGUAGE="JavaScript1.2">

// Dissolving text effect - By Peter Gehrig (http://www.24fun.ch/)


var message = new Array()
message[0]="JavaScriptBank.com"
message[1]="Bank of over 2000+ free JavaScripts"


var i_message=0

// vi tri xuat hien cua chu (pixels).
var covertop=20
var coverleft=150

// kich thuoc cua anh, neu muon thay doi kich thuoc ban nen tao mot anh moi
var coverwidth=1200
var coverheight=96

var texttop=covertop
var textleft=coverleft
//do rong cua chu can ap dung hieu ung
var textwidth=400
var textheight=coverheight

var cliptop=0
var clipright=textwidth
var clipbottom=coverheight
var clipleft=0

var clippoints

// toc do thuc hien hieu ung
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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JavaScript1.2">
if (document.all&&window.print){
document.write('<DIV ID="text" class="textstyle">'+message[0]+'</div>')
document.write('<DIV ID="cover" class="coverstyle"><img src="slidefader.gif"></DIV>')
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (3)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

index.services YeuNu.com choose.exchange ChainTutor.com war.money ApexBTC.com CTRCoin.com system.money eChainBank.com this.bid Card.rip CryptoKD.com pornID.net ChatTotal.com CreditCard.rip XMQV.com ZWVQ.com CoinHolo.com ABP3.com choose.works

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Peter Gehrig [more]
5,851
0
3
3
4.68 KBytes

JavaScript Dissolving text effect

2.7/5 3 votes / 5,851 previews / 0 comment 30/01/2007 This is a great DHTML script that rotates and displays any number of messages, with a unique dissolving effect applied d...JavaScript Dissolving text effect - Dissolving text effect

tuquynhqn2000

Let's be first member to do this

tuquynhqn2000