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!" 
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