Free Javascripts - Zoom Text Transition

> Home > Text Effects > Zoom Text Transition

Zoom Text Transition

In a Nutshell: If you'd like to create a Hollywood-style dramatic text transition to lead people into a different part of your website, or simply to create a schnazzy hidden effect, this script will help you to do so. It can be used as in the demo below to simply create a sequence of zoomed text upon a click action, or can alternatively trigger a link to be actioned after the animation is finished. You'll see where to add the link within the source code for the effect. Timing and colours can all be edited within the header source code.

Try it out: Click on this link to launch the zoomed text

Use it Yourself: Cut and paste the following code into the <head> section of your HTML. Note that you must also include the onclick command within your <body> area to activate the action (see below), plus include the div with the id of "divZoom" in the location where you'd like the zoomed text to appear.

<style type="text/css"> #divZoom {position:absolute; left:0px; top:170px; width:100%; text-align:center;} </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** ZoomFade * Copyright (C) 2002 by Styler * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * Visit https://gorod.ck.ua *********************************************************************************/ 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','Free-JavaScripts.com','for 100s of','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>

Next, the following component must be placed within the <body> section of your HTML code. Notes scattered throughout the text will assist you in customising the code to your needs.

<div id="divZoom" align="center"></div> <a href="#" onclick="zoomInit(); return false">Click to start Zoom Text Transition</a>

This Script Created By: Styler

HOME | Newest | Most Popular | Tutorials | Submit a Script | Email Us

Copyright © 1999-2024 Curiosity Cave Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without the expressed written permission of Curiosity Cave Pty Ltd.