e24Writer - Chained opacity transition
Intro
e24Writer is a plugin written for scriptaculous to gradually display a group of elements using a chained opacity transition. The elements can be either images, HTML or text.
Demos
Usage
Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Writer after both.
1 2 3 | <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/e24writer.js'></script> |
For example, if we have text that we want to appear gradually letter-by-letter. First, we need to split the text into individual letters. If the text is a whole image then we need to split it in an image per letter basis.
Next, write the necessary HTML code to define the animation. We will need a container layer (”letters” on the example) and inside the container we will have a layer for each element. There is one layer per letter. Example below:
1 2 3 4 5 6 | <div id="letters" > <div class="letter"><img src="img/letter1.jpg" alt="letra1" /></div> <div class="letter"><img src="img/letter2.jpg" alt="letra2" /></div> <div class="letter"><img src="img/letter3.jpg" alt="letra3" /></div> <div class="letter"><img src="img/letter4.jpg" alt="letra4" /></div> </div> |
Finally, we write the necessary javascript code. As first param we will provide the container layer id, and as second param an option’s array.
1 | oe24Writer = new e24Writer( 'letters', { autostart: true, duration: 1.0, interval: 0.3 }); |
Options
- autostart: Boolean, if set to “true” the animation starts automatically, if set to “false” then we will need to call start() method to initiate the animation. Default value: “false”
- duration: Decimal, representing the time in seconds that each element transition will take. Default value: 1.0
- interval: Decimal, representing the time in seconds that will take between each element transition. Default value: 0.3
- callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.
Methods
- start: No params needed. Initiates the animation if effect object was created with the autostart option set to “false”.
Known Issues
- Add more direction, like right-left.
- Ability to restart the animation.
Download
e24Writer 0.4.1 beta (71.33 KB)
If you want to check what I am working on now, then follow me at twitter @aartiles24
e24Writer. Efecto para animar textos….
e24Writer es un widget para scriptaculos que permite animar textos o secuencias de imágenes de forma que vallan apareciendo letra a letra con un efecto de aparición suave….