« »

Most of you that have been here before have probably seen this script, it's almost the same as the old ZoomText. I have totally remade it and it's much better now. It's still a little slow in Netscape 4, but it's really good in Explorer 4 & 5 and Netscape 5. It also degrades, older browsers just want see it.

There are also some new properties you can set. To make this script zoom the other way you just have to change the zEndSize variable to something lower the zStartSize variable. Try it. You can in theory have more objects going at once as well, but this makes Netscape 4 behave strange.

Label: ZoomFade 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
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>#divZoom {
	LEFT: 0px; POSITION: absolute; TEXT-ALIGN: center; TOP: 170px; WIDTH: 100%
}
</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=JavaScript type=text/javascript>
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()


/*Here are the variables you have to set, play with different values:                                                                 
First the text: (it will stop and fade/change the colors on the last one)*/
zText=new Array('Check Out','JavaScriptBank.com','Free Scripts!')
  
//Now the colors:
//all you have to do is set the color you want to have in here: 
//(the first color will be the color that the text is when it zooms.)
zColor=new Array('#202020','#424242','#8E8E8E','#C2C2C2','#E8E8E8')
 
var zEndSize=70   //The fontsize in px you want the zoom to end at
var zSpeed=70     //Zoom speed
var zAddSize=5    //Px to add to the fontsize on each interval
var zFadeSpeed=70 //Color change/fade speed
var zFont='arial black,arial,helvetica,sans-serif' //Font
var zHide=true    //do you want it to hide when its done? (true or false)
var zHideWait=1000  //Time to wait before hiding
var zStartSize=10 //The size to start at
var zEndCode=""   // Code to execute when the zoom and fade is finished. ie: "location.href='newpage.html', executes when the hide does.

/*You can remove this if you don't wan't it to start right away.
You can have it start if someone clicks a link (make a link like this:
<a href="#" onclick="fadeInit()">Click to Zoomtext</a>)*/
//onload=zoomInit;

/********* You shouldn't really have to set anything below this point ***********/

//Object functions
function makeZoomObj(obj,font,size,endsize,color,text,zspeed,fadespeed,addsize,hide,hidewait,endcode){
   	this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0;	
   	this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0;	
	this.zoomWrite=b_zoomWrite;	this.zoomIt=b_zoomIt; this.fadeIt=b_fadeIt;	this.zoomFade=b_zoomFade;
	this.font=font; this.color=new Array(); this.color=eval(color);	this.text=new Array(); this.text=eval(text);
	this.zspeed=zspeed; this.fadespeed=fadespeed; this.addsize=addsize; this.endcode=endcode
	this.hide=hide; this.hidewait=hidewait; this.size=size; this.startsize=size; this.endsize=endsize
	if(size<endsize){this.way="<"; this.addsize=this.addsize
    }else{this.way=">"; this.addsize=-this.addsize}
	if(bw.dom || bw.ie4){ //Setting the style properties
		this.css.fontFamily=this.font; this.css.fontSize=this.size+"px"; this.css.color=this.color[0]
	}
	this.obj = obj + "Object"; 	eval(this.obj + "=this"); return this
}
function b_zoomFade(num){
	if(num<this.text.length){
		this.size=this.startsize
		this.zoomIt(num,'this.zoomFade('+(num+1)+')')
	}
	else if(num==this.text.length) this.fadeIt(0,'this.zoomFade('+(num+1)+')')
	else if(this.hide) setTimeout(this.obj+".css.visibility='hidden'; eval("+this.obj+".endcode)",this.hidewait)
}
function b_zoomWrite(num,cnum){
	if(bw.ns4){
		this.writeref.write('<span style="text-align:center; font-size:' +this.size+'px; font-family:'+this.font+'; color:'+this.color[cnum]+'">'+this.text[num]+'</span>')
		this.writeref.close()
	}else this.writeref.innerHTML="<center>"+this.text[num]+"</center>"
}
function b_zoomIt(num,fn){
	if(eval(this.size+this.way+this.endsize)){
		if(this.size==this.startsize || bw.ns4) this.zoomWrite(num,0)
		if(bw.dom || bw.ie4) this.css.fontSize=this.size+"px"
		this.size=this.size+this.addsize
		setTimeout(this.obj+".zoomIt("+num+",'"+fn+"')",this.zspeed)
	}else eval(fn)	
}
function b_fadeIt(num,fn){
	if(num<this.color.length){
		if(bw.ns4) this.zoomWrite(this.text.length-1,num)
		else this.css.color=this.color[num]
		num++
		setTimeout(this.obj+".fadeIt("+num+",'"+fn+"')",this.fadespeed)
	}else eval(fn)	
}
/*Initiates the object, shows it and starts the zoom
****************************************************************************/
function zoomInit(){
	if(bw.bw){
		oZoom=new makeZoomObj('divZoom',zFont,zStartSize,zEndSize,'zColor','zText',zSpeed,zFadeSpeed,zAddSize,zHide,zHideWait,zEndCode)
		oZoom.zoomFade(0)
		oZoom.css.visibility='visible'
	}
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV align=center id=divZoom><!-- older browsers will not see this --></DIV>
	<!--
    	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 (0)
New

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

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

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

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

30/01/2007
Unknown [more]
2,892
0
0
0
7.04 KBytes

JavaScript ZoomFade Effect

0/5 0 votes / 2,892 previews / 0 comment 30/01/2007 Most of you that have been here before have probably seen this script, it's almost the same as the old ZoomText. I have ...JavaScript ZoomFade Effect - ZoomFade Effect

Let's be first member to do this

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

ZoomFade Effect

Label: ZoomFade Effect (adsbygoogle = window.adsbygoogle || []).push({});

Free iPage Web Hosting for First Year NOW

Write your comment

JavaScript by day

Label: ZoomFade Effect