Full version: jsB@nk » Text » Animation » ZoomFade Effect
URL: https://www.javascriptbank.com/zoomfade-effect.html
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.
Full version: jsB@nk » Text » Animation » ZoomFade Effect
URL: https://www.javascriptbank.com/zoomfade-effect.html
<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--><SCRIPT language=JavaScript type=text/javascript>function lib_bwcheck(){ //Browsercheck (needed)this.ver=navigator.appVersionthis.agent=navigator.userAgentthis.dom=document.getElementById?1:0this.opera5=this.agent.indexOf("Opera 5")>-1this.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.ie6this.mac=this.agent.indexOf("Mac")>-1this.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 atvar zSpeed=70 //Zoom speedvar zAddSize=5 //Px to add to the fontsize on each intervalvar zFadeSpeed=70 //Color change/fade speedvar zFont='arial black,arial,helvetica,sans-serif' //Fontvar zHide=true //do you want it to hide when its done? (true or false)var zHideWait=1000 //Time to wait before hidingvar zStartSize=10 //The size to start atvar 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 functionsfunction 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=endcodethis.hide=hide; this.hidewait=hidewait; this.size=size; this.startsize=size; this.endsize=endsizeif(size<endsize){this.way="<"; this.addsize=this.addsize }else{this.way=">"; this.addsize=-this.addsize}if(bw.dom || bw.ie4){ //Setting the style propertiesthis.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.startsizethis.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.addsizesetTimeout(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--><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-->