Dancing Text (IE) : Animation « GUI Components « JavaScript DHTML
Dancing Text (IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Qiksearch Dancing Text</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:maroon; font-weight:bold}
</style>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/qiksearch_dancing_text.htm
//*********************************************
//* Qiksearch Dancing Text *
//* This script makes a text dance!!! *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.com *
//* E-mail : premshree@hotmail.com *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var time_length =100; //Scroll speed
var begin_pos=55;
var left_pos=125;
var jump_height=3;
var i;
var k=0;
var text_dance = "Dancing Text by Premshree Pillai";
var text_dance_len= text_dance.length;
//IF STRING LENGTH IS EVEN
if(text_dance_len%2==0)
{
text_dance_len+=1;
}
function dance()
{
for(var i=1; i<=text_dance_len; i++)
{
document.write('<div id="' + text_dance + i + '" style="position:absolute; visibility:hidden; left:' + (left_pos+15*i) + '">');
document.write('<font face="verdana,arial,helvetica" size="2" color="#003399"><b>' + text_dance.charAt(i-1) + '</b></font></div>');
}
dodance();
}
function dodance()
{
for(var i=1; i<=text_dance_len; i++)
{
Scroll(text_dance+i);
}
}
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
}
//DANCER
function Scroll(layerName){
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="visible"');
if(k%2==0)
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.top="' + (begin_pos+jump_height) + '"');
}
else
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.top="'+ (begin_pos-jump_height) +'"');
}
i++;
if(k<1)
{
k++;
}
else
{
k--
}
setTimeout("Scroll('"+layerName+"')",time_length);
}
}
dance();
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Qiksearch Dancing Text</span>
<br>
<br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript that creates a dancing effect for a text like the one above.<br><br>
You can change the text by changing the variable <font face="courier">text_dance</font>.
The distance of the text from top can be changed by changing the variable <font face="courier">begin_pos</font> (Here it is 55). The distance of the text from the left can be changed by changing the variable <font face="courier">left_pos</font> (Here it is 125). The jump height can be changed by changing the variable <font face="courier">jump_height</font> (Here it is 3). You can also change the speed by changing the variable <font face="courier">time_length</font>.
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="link">© Premshree Pillai</a></center>
</body>
</html>
