Flying letters

Quick search

Scripts - DHTML

Scripts - DHTML (new)

Web Developer Blog

Web Developer Blog (new)

Scripts and Applications

Ajax
ASP
ASP.NET
C and C++
CFML
CGI and Perl
Flash
Java
JavaScript
PHP
Python
XML

Software Downloads

DHTML Scripts - Detail

Date added: 2007-05-12 19:05:01

FF1+ IE5+ Opr7+

Flying Letters

Description: Animate your site's header into view, one letter at a time, with this one-of-a-kind script! Tested in Firefox 1.0.7, Opera 8.51, Konqueror 3.5.0-1.2 and IE 6.

Demo:

Thanks for visiting$ !

Directions

Simply add the below code to the <BODY> of your page:

Select All
<h2 id="fly">Thanks for visiting$ !</h2> <script type="text/javascript"> //Flying Letters script- by Matthias (info@freejavascripts.f2s.com) // Modified by Twey for efficiency and compatibility //For this script and more, visit : http://www.dynamicdrive.com //Configure message to display. Use "$" for linebreak //By default, set to just grab the text from element with ID="fly" message = document.getElementById("fly").innerHTML; // $ = taking a new line distance = 50; // pixel(s) speed = 200; // milliseconds var txt="", num=0, num4=0, flyofle="", flyofwi="", flyofto="", fly=document.getElementById("fly"); function stfly() { for(i=0;i != message.length;i++) { if(message.charAt(i) != "$") txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"; else txt += "<br>"; } fly.innerHTML = txt; txt = ""; flyofle = fly.offsetLeft; flyofwi = fly.offsetWidth; flyofto = fly.offsetTop; fly2b(); } function fly2b() { if(num4 != message.length) { if(message.charAt(num4) != "$") { var then = document.getElementById("n" + num4); then.style.left = flyofle - then.offsetLeft + flyofwi / 2; then.style.top = flyofto - then.offsetTop + distance; fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5); } num4++; setTimeout("fly2b()", speed); } } function fly3(target,lef2,num2,top2,num3) { if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)) { if(lef2 >= 0) lef2 -= num2; else lef2 += num2 * -1; if(Math.floor(lef2) != -1) { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2); } else { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2 + 1); } if(lef2 >= 0) top2 -= num3 else top2 += num3 * -1; if(Math.floor(top2) != -1) document.getElementById(target).style.top = Math.floor(top2); else document.getElementById(target).style.top = Math.floor(top2 + 1); setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50) } } stfly() </script>

Related DHTML Scripts

Nudging Text	Date Added: 2007-05-12
-User submitted This attention craving text contains letters that constantly nudge one another....

Roller Coaster Text	Date Added: 2007-05-12
-User submitted This interesting text effect animates any text in a roller coaster style!...

Sine Scrolling Text script	Date Added: 2007-05-12
-User submitted Using some sophisticated math calculations, not to mention great DHTML programming, Mark has created this visually stunning sine scrolling text animation. The text flows...

Wave text	Date Added: 2007-05-12
-User submitted Add a watery, wavy effect to a header text with this mesmerizing script!...

Text Animator	Date Added: 2007-05-12
-User submitted Text Animator is a great cross-browser text effect. It fades in and out infinite text messages, with each message optionally being clickable....

Dissolving text effect	Date Added: 2007-05-12
-User submitted This is a great DHTML script that rotates and displays any number of messages, with a unique dissolving effect applied during each rotation. Very impressive......

Pulsating Text	Date Added: 2007-05-12
-User submitted Use this script to render an "aura" around your text, accomplished using IE's multimedia filters and scripting....

DOM Drag & Drop script	Date Added: 2007-05-12
-User Submitted This is a no fuss DOM drag script that be used on any relatively or absolutely positioned element on the page to make it instantly dragable. The script also fires 3 custom eve...

YUI Color Picker	Date Added: 2007-05-18
-User Submitted Need a color picker for your online forms or application? This advanced color picker is based on Yahoo's excellent UI library, and features a fully interactive, drag and drop...

ColorJack DHTML color picker	Date Added: 2007-05-18
-User Submitted ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps....

pathGenerator	Date Added: 2007-06-16
-User Submitted _pathGenerator is an online wizard that allows anyone to easily create an animating layer that follows any desired path. Just drag your mouse to map out its course,...

VML Editor	Date Added: 2007-06-16
-User Submitted VML (Vector Markup Language) is a text based vector graphics format proprietary to Internet Explorer. Jacco has created the following powerful VML editor to allow you to use your...

Time-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is a fully customizable "time based" progress bar. Set any duration (ie: 10 seconds) for the script to finish loading the bar. A great script to prov...

Event-based Progress Bar	Date Added: 2007-06-16
-User Submitted This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control prec...

WinXP Progress Bar	Date Added: 2007-06-16
-User Submitted A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can ...