e24Writer - Efecto de aparición progresiva
Introducción
e24Writer es un plugin de scriptaculous que permite hacer una animación donde los elementos van apareciendo progresivamente mediante una transición de opacidad. Los elementos pueden ser imágenes, elementos HTML o texto.
Demos
¿Cómo utilizarlo?
Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro de header del código HTML de la página. Incluya e24Writer después de ambos
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> |
Este efecto consiste en hacer una aparición progresiva de un grupo de elementos, por ejemplo las letras de un texto. Para esto debemos separar cada uno de los elementos, si el texto a animar es una imagen entonces necesitaremos picar la imagen en cada una de las letras.
Ahora escriba el código HTML necesario para definir el contenido a animar. Necesitaremos una capa contenedora (“letters” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento de la animación, por ejemplo una capa para cada letra.
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> |
A continuación escribimos el código javascript necesario para ejecutar la animación. Le pasaremos como primer parámetro el id de la capa contenedora “letters” y un array de parámetros para el efecto.
1 | oe24Writer = new e24Writer( 'letters', { autostart: true, duration: 1.0, interval: 0.3 }); |
Todas las Opciones
- autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la animación. Valor por defecto: false
- duration: Un valor decimal que representa el tiempo en segundos que durará la transición de opacidad de cada elemento. Valor por defecto: 1.0
- interval: Un valor decimal que representa el tiempo en segundos que pasará entre cada aparición de cada elemento. Valor por defecto: 0.3
- callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.
Métodos
- start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.
Errores conocidos y cosas por hacer
- Permitir varias hacer la animación en varias direcciones, izquierda-derecha, derecha-izquierda.
- Permitir reiniciar la animación.
Descargar
e24Writer 0.4.1 beta (71.33 KB)
Si quieres saber en qué trabajo ahora sígueme en 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….