Zoom Out Text On Internet Explorer

This Message DHTML script shows how you can create a webpage that displays lines of text that appear to be flying out of the web page.

Works on IE only.

Script Demo:

Demo

Dynamic HTML Code:

Insert this code into <head> tags

<script>
//<!--Change this text-->
    text=new Array('www','road2webmaster','com','road2webmaster Software')

//<!--This is the number of words in your message-->
    var numText=4

//<!--These are the colors the last word will fade to.  The first color is the main color.-->
    color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

//<!--This is the total number of colors from above.-->
    var numColors=5

//<!--This is the size you want the zoom to end at.-->
    var endSize=70

//<!--This is the speed you want it to zoom in.-->
    var Zspeed=30

//<!--This is the speed the colors will fade.-->
    var Cspeed=200

//<!--This is the font of the fade in message.-->
    var font='Arial Black'

//<!--This will allow you to have the message stay or go.  True will make it go.
//      False will make it stay.-->
    var hide=false

var size=10
var gonum=0
var ie, n;
if (document.all) {
        n=0
        ie=1
        zoomText='document.all.zoom.innerText=text[num]'
        zoomSize='document.all.zoom.style.fontSize=size'
        closeIt=""
        fadeColor="document.all.zoom.style.color=color[num]"
    }
if (document.layers) {
        n=1;ie=0
        zoomText=""
        zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
        closeIt="document.zoom.document.close()"
        fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"
    }
function zoom(num,fn){
    if (size<endSize){
        eval(zoomText)
        eval(zoomSize)
        eval(closeIt)
        size+=5;
        setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
    }else{
        eval(fn);
    }
}
function fadeIt(num){
    if (num<numColors){
        eval(fadeColor)
        eval(closeIt)
        num+=1;
        setTimeout("fadeIt("+num+")",Cspeed)
    }else{
        hideIt()
    }
}
function hideIt(){
    if(hide){
        if(ie)document.all.zoom.style.visibility="hidden"
        if(n)document.layers.zoom.visibility="hidden"
    }
}
function init(){
    if(ie){
        document.all.zoom.style.color=color[0]
        document.all.zoom.style.fontFamily=font
    }
    if(ie || n) go(0)
}
function go(num){
    gonum+=1
    size=10
    if(num<numText){
        zoom(num,'go('+gonum+')')
    }else{
        fadeIt(0)
    }
}
</script>

Insert this code into <body> tags

<CENTER><IMG SRC="http://www.road2webmaster.com/whitestrand.jpg" WIDTH="261" HEIGHT="229"></CENTER><P>
<div id="zoom" align="center" style="position:absolute; top:150">
</DIV>

Instruction:

Replace <body> tag with <body onload="init()">.

Webmaster » Web Programming » DHTML » Zoom Out Text On Internet Explorer

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links