Sep 30 2008

1

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.


The HTML:
<ul id="slidingText">
 <li>javascript</li>
 <li>mootools</li>
 <li>text effects</li>
 <li>sliding text</li>
 <li>this is not flash</li>
</ul>

Next the Javascript:

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


window.addEvent('domready'), function(){
        $('slidingText').getElements('li').each(function(el){
              new SlidingText(el);
        });
});

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

Download SlidingText.js


Tags: , , ,