Download falling text script

Demo

Bookmark and Share

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

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:

<!-- START OF FALLING LINKS -->
<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>  
<!-- END OF FALLING LINKS -->

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

Layout

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

#dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{
  color:blue;
  padding:2px;
  visibility:hidden;
  font-weight:bold;
  text-decoration:none;
}
#dhtmlgoodies_fallingLinks a:hover{
  color:red;
}

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

Comments

viaya
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 Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com