Sep 30 2008


Sliding Text Animation

All too often from clients and friends I get requests to add something 'flashy' to their site. I have found myself in the position way too many times arguing against flash, when in fact my audience doesn't care. I have resorted to the answer "Sure" just to please them. More often then not I just create the effect using javascript. The result being that they don't even know it isn't even flash.

This will be the first of many in a series of what I'll refer to as "I can't believe its not flash!" :D

Recently, I had a request to create a text animation when you rollover a particular piece of text. This effect would add each letter in one by one with a specified delay. I created a class called 'SlidingText' with Mootools.

First the CSS:
#slidingText {
        padding: 0 0 0 0;
	margin: 15px;
	font: 14px Arial;
	list-style-type: none;
	cursor: pointer;
	width: 200px;
#slidingText li {
       text-transform: uppercase;
       margin: 5px 10px;
       padding: 0 0 0 0;

The main thing to note about the css is the elements we are going to animate ( 'li's ) have a defined width. By doing this we remove any bouncing or any other weird effects when we manipulate the DOM.

<ul id="slidingText">
 <li>text effects</li>
 <li>sliding text</li>
 <li>this is not flash</li>

Next the Javascript:

Make sure you have included mootools, and SlidingText.js (download link below).

window.addEvent('domready'), function(){
              new SlidingText(el);

The Effect: (rollover text below)
  • javascript
  • mootools
  • text effects
  • sliding text
  • this is not flash
[inline] [/inline]

Download SlidingText.js

Tags: , , ,