Text Animations - Trembling Text
HTML Code:
<Head>
<style>
.jc{
position:relative;
}
</style>
<script language="JavaScript1.2">
//Trembling message script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
//For full source code, 100's more DHTML scripts, and TOS,
//visit [url]http://www.dynamicdrive.com[/url]
var ns6=document.getElementById&&!document.all
var ie=document.all
var customcollect=new Array()
var i=0
function jiggleit(num){
if ((!document.all&&!document.getElementById)) return;
customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1
}
function init(){
if (ie){
while (eval("document.all.jiggle"+i)!=null){
customcollect[i]= eval("document.all.jiggle"+i)
i++
}
}
else if (ns6){
while (document.getElementById("jiggle"+i)!=null){
customcollect[i]= document.getElementById("jiggle"+i)
i++
}
}
if (customcollect.length==1)
setInterval("jiggleit(0)",80)
else if (customcollect.length>1)
for (y=0;y<customcollect.length;y++){
var tempvariable='setInterval("jiggleit('+y+')",'+'100)'
eval(tempvariable)
}
}
window.onload=init
</script>
</Head>
//To call Tremble Effect
<span id="jiggle0" class="jc">Trembling Text!</span>
Text Animations - Matrix Text Effect
HTML Code:
<Head>
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
/***********************************************
* The Matrix Text Effect- by Richard Womersley ([url]http://www.mf2fm.co.uk/rv[/url])
* This notice must stay intact for use
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);
ma_tab.style.backgroundColor="#000000";
ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval("mytricks()", speed);
}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color="#33ff66";
matemp.style.fontWeight="bold";
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout("zoomer("+ycol+")", speed);
}
}
// -->
</script>
</Head>
//To Call Matrix Effect
<div id="matrix">Matrix Effect!</div>
Text Animations - Bouncy Message
HTML Code:
<Body>
<style type="text/css">
#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
}
</style>
<script language="JavaScript1.2">
/*
Bouncy message script- By Dynamicdrive.com
Code based on Lloyd Hassell's, at [url]http://www.dynamicdrive.com/dynamicindex4/bounceimage.htm[/url]
For full source, TOS, and 100s DTHML scripts, visit [url]http://dynamicdrive.com[/url]
*/
//Configure the below three variables
//1) Set message to display (HTML accepted)
var thecontent='<h2><font color="#0000FF">Welcome to Dynamic Drive!</font></h2>'
//2) Set delay after which message should be hidden, in miliseconds ('' makes it incessantly visible on the screen)
var hidetimer='';
//3) Set speed of animation (1-50), where larger is faster
var BallSpeed = 20;
///NO NEED TO EDIT BELOW THIS LINE///////////
var contentWidth;
var contentHeight;
var maxBallSpeed = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;
function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("supertext").style.visibility = "visible";
contentWidth=supertext.offsetWidth
contentHeight=supertext.offsetHeight
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
contentWidth=document.supertext.document.width
contentHeight=document.supertext.document.height
document.layers["supertext"].visibility = "show";
}
setTimeout('moveBall()',400);
if (hidetimer!='')
setTimeout("hidetext()",hidetimer)
}
function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("supertext").style.left = xPos + document.body.scrollLeft;
document.all("supertext").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["supertext"].left = xPos + pageXOffset;
document.layers["supertext"].top = yPos + pageYOffset;
}
animatetext=setTimeout('moveBall()',20);
}
}
function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - contentWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - contentHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}
function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}
if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}
</script>
</Body>
Text Animations - 3d Spinning Message
HTML Code:
<Head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
</Head>
//This code must not be in any container tags such as <div> or <table>
<Body>
<script type="text/javascript">
/***********************************************
* 3D Spinning Message Script- By Copyright (c) 2003 Peter Gehrig
* Website: [url]http://www.24fun.com[/url]
* Script available at/modified by Dynamic Drive ([url]http://www.dynamicdrive.com[/url])
* This notice must stay intact for use
***********************************************/
// Add as many messages as you like
var message=new Array("Dynamic Drive", "#1 DHTML site online", "Visit us for free scripts", "Enjoy")
// Set the outline-color. Add as many colors as you like
var outlinecolor=new Array("black", "black")
// Set fillcolors 1. Add as many colors as you like
var fillcolor1=new Array("gray", "green", "white", "green")
// Set fillcolors 2. Add as many colors as you like
var fillcolor2=new Array("blue", "olive", "black", "lime")
// Set the letter marking the circle
var circlemark=new Array("-")
// Set the width of the outline
var strkweight=2
// Set the waiting time between the messages (seconds)
var pause=2
// Set the strength of the opacity (transparency of letters)
var strengthopacity="60%"
// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5
// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview="yes"
// Do not edit below this line
mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body //Dynamicdrive added object
var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight
var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)
var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2
var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=1000
var ie=document.getElementById&&document.all?1:0
for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}
for (i=0;i<=message.length-1;i++) {
var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}
function changeform() {
if (keepinview=="yes") //DD added
document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {document.getElementById('textpathid').string=""
document.getElementById("roofid").style.display="none" //DD added
}
}
function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=""
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout("tick()",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout("changeform()",pause)
}
}
if (ie) {
document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')
document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')
document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent("onload", changeform) //DD added code
else
window.onload=changeform
}
</script>
</Body>
Text Animations - Neon Lights Message
HTML Code:
//Set Neon Text in Header as example, you can place it anywhere you want it to be
<h1>
<script language="JavaScript1.2">
/*
Neon Lights Text
By JavaScript Kit ([url]http://javascriptkit.com[/url])
For this script, TOS, and 100s more DHTML scripts,
Visit [url]http://www.dynamicdrive.com[/url]
*/
var message="Welcome to Dynamic Drive!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100 //in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h1>
Text Animations - Roller Coaster Message
HTML Code:
//Place This script where you want roller coaster text to appear
<script language="JavaScript">
/*
script edited by David Gardner (toolmandav@geocities.com)
Permission granted to Dynamicdrive.com to feature the script
For more DHTML scripts, visit Dynamicdrive.com
*/
//put your text here
var theText = "David Gardner";
function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(nextSize(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theDiv.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>
<div ID="theDiv" align="center">
</div>
//Starts the Coaster Text when document loads
<body onload="doWave(0)">
Text Animations - Glowing Message
HTML Code:
<Head>
<style>
<!--
#glowtext{
filter:glow(color=FFFF00,strength=3);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">
/*
Glowing Text Script-
© Dynamic Drive ([url]www.dynamicdrive.com[/url])
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=2
else
document.all.glowtext[which].filters[0].strength=3
}
function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}
function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}
if (document.all)
window.onload=startglowing
</script>
</Head>
//To Call Glowing Text
<span id="glowtext">This is a glowing text</span>
Text Animations - Pulsating Message
HTML Code:
<Head>
<script>
<!--
//Pulsating Text (Chris A e-mail: [email]KilerCris@Mail.com[/email])
//Permission granted to Dynamic Drive to feature script in archive
//For full source and 100's more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
var divs = new Array();
var da = document.all;
var start;
//CONFIGUER THESE VARS!!!!!!
//speed of pulsing
var speed = 50;
function initVars(){
if (!document.all)
return
//Extend of shrink the below list all you want
//put an "addDiv(1,"2",3,4); for each div you made,
//1)'id' of div
//2)color or glow(name or hex)(in quotes!!!)
//3)minimum strength
//4)maximum strength
addDiv(hi,"lime",2,11);
addDiv(welcome,"red",4,9);
addDiv(message,"purple",2,4);
addDiv(msg2,"orange",15,17);
addDiv(msg3,"blue",1,3);
//NO MORE EDITING!!!!!!
startGlow();
}
function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}
function startGlow()
{
if (!document.all)
return 0;
for(var i=0;i<divs.length;i++)
{
divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
divs[i][0].style.width = "100%";
}
start = setInterval('update()',speed);
}
function update()
{
for (var i=0;i<divs.length;i++)
{
if (divs[i][4])
{
divs[i][0].filters.Glow.Strength++;
if (divs[i][0].filters.Glow.Strength == divs[i][3])
divs[i][4] = false;
}
if (!divs[i][4])
{
divs[i][0].filters.Glow.Strength--;
if (divs[i][0].filters.Glow.Strength == divs[i][2])
divs[i][4] = true;
}
}
}
-->
</script>
</Head>
<Body>
<div id="hi" style="color: lime">
Hello!
</div>
<br>
<div id="welcome" style="color: lime">
Welcome!
</div>
<br>
<div id="message" style="color: lime">
This is a pulsating message!
</div>
<br>
<div id="msg2" style="color: lime">
This is another pulsating message!
</div>
<br>
<div id="msg3" style="color: lime">
This is yet another pulsating message!
</div>
</Body>