New on

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download falling text script


Bookmark and Share

Put this into your <HEAD> section

Put this into your <BODY> section


Create falling text items

The falling text items are typically links. These items are created by use of plain HTML. This is how they are created in the demo:

<div id="dhtmlgoodies_fallingLinks">
  <a href="#">This</a> |
  <a href="#">Is</a> |
  <a href="#">An</a> |
  <a href="#">Example</a> |
  <a href="#">Of</a> |
  <a href="#">Falling</a> |
  <a href="#">Links</a> |

<div id="dhtmlgoodies_fallingLinks"> is the parent element. It's important that you have an element like this with the ID dhtmlgoodies_fallingLinks. It doesn't nescessary have to be a DIV.


CSS is used to add layout to the falling items. Example:

#dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{
#dhtmlgoodies_fallingLinks a:hover{

Note! You don't have to use links(<A> tags) in this script. You can for example use <SPAN> tags. If you do, remember to change it in both your HTML and CSS.

Javascript variables

There are 3 variables you can use to customize the script:

var fallFromYPosition = -30;
var slidePixelPerMove = 15;
var slideTimeoutBetweenMoves = 5;
var slideInReverseOrder = false;

  • fallFromYPosition = Horizontal position where the items should slide from. -30 which is default means that the links will slide from browsers top edge.
  • slidePixelPerMove = Slide speed. Higher value = faster.
  • slideTimeoutBetweenMoves = Slide speed. Lower value = faster
  • slideInReverseOrder = Slide in reverse order? i.e. start with last item


how do you make the links go in reverse
viaya at 01:32AM, 2012/07/08.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017