Nudging Text

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

IE5+

Nudging text!

Note: Modified by to function in NS6

Description: This attention craving text contains letters that constantly nudge one another. The effect is visible in both IE4+ and NS6. Please see technical note below...

Demo:

Directions

Step 1: Simply paste the below code where you wish the text to appear on your page:

Select All
<script language="JavaScript1.2"> //configure message message="Welcome to !" //animate text in NS6? (0 will turn it off) ns6switch=1 var ns6=document.getElementById&&!document.all mes=new Array(); mes[0]=-1; mes[1]=-4; mes[2]=-7;mes[3]=-10; mes[4]=-7; mes[5]=-4; mes[6]=-1; num=0; num2=0; txt=""; function jump0(){ if (ns6&&!ns6switch){ jump.innerHTML=message return } if(message.length > 6){ for(i=0; i != message.length;i++){ txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"}; jump.innerHTML=txt; txt=""; jump1a() } else{ alert("Your message is to short") } } function jump1a(){ nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0 nfinal.style.left=-num2; if(num2 != 9){ num2=num2+3; setTimeout("jump1a()",50) } else{ jump1b() } } function jump1b(){ nfinal.style.left=-num2; if(num2 != 0){num2=num2-3; setTimeout("jump1b()",50) } else{ jump2() } } function jump2(){ txt=""; for(i=0;i != message.length;i++){ if(i+num > -1 && i+num < 7){ txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>" } else{txt=txt+"<span>"+message.charAt(i)+"</span>"} } jump.innerHTML=txt; txt=""; if(num != (-message.length)){ num--; setTimeout("jump2()",50)} else{num=0; setTimeout("jump0()",50)}} </script> <h2><div id="jumpx" ></div></h2> <script> if (document.all||document.getElementById){ jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx jump0() } else document.write(message) </script>

Technical Note

The nudging effect in NS6 (as of NS6.01) is currently quite choppy, a problem we believe is inherent to the browser, and hopefully will go away as NS6 matures. In the meantime, we've included a variable inside this script that allows you to turn off the animation in NS6. Yes, we're too considerate :)

Related DHTML Scripts

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 ...

Pie Graph script	Date Added: 2007-06-16
-User Submitted This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page....