AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

e24BubbleFx - Transición de fotos mediante efecto de burbuja

Introducción
e24BubbleFx es un plug-in para Mootools que consiste en la transición entre dos fotografías, una como capa superior y otra inferior alternándose la visión de una u otra con un efecto burbuja de la propia imagen superior.
Lo mejor es verlo en acción y así entenderéis rápidamente a que me refiero.

Demos
Demo1: Ejemplo básico
Demo2: Ejemplo con eventos

¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Fx.Transitions, Fx.Tween y todas sus dependencias. Y además incluye e24BubbleFx después de ambos:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24bubblefx-1.0rc.js" type="text/javascript"></script>

Ahora escribe el código HTML necesario para definir el visor del efecto. Necesitaremos una capa contenedora (“visor” en el ejemplo). Esta capa tendrá la imagen de fondo que se irá descubriendo mediante el efecto. Debes tener en cuenta que la imagen que pongas de fondo aparecerá directamente en caso de ausencia de javascript, o sea que el efecto degradará satisfactoriamente.

Luego un poco de CSS básico para que el efecto funcione. Simplemente definir un alto y ancho para la capa y definir la imagen de fondo.

1
2
3
4
5
6

#visor {
	position:relative;
	width:1000px;
	height:250px;
	background: url(img/back1.jpg) no-repeat;
}

Ahora veremos el código javascript necesario para el funcionamiento del efecto. Pasaremos como parámetro un objeto de opciones. Entre las principales opciones tenemos “container” que debería ser el id de la capa contenedora del efecto, “visor” en este caso. Los demás parámetros los veremos en detalle más abajo. Por último tenemos que llamar el método start pasándole un array de coordenadas que describirá los pasos de la burbuja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	var bubbleFx = new e24BubbleFx({
		container: 'visor',
		width: 1000,
		height: 250,
		initStep: {x:0, w:100},
		frontImg: 'img/back2.jpg',
		backImg: 'img/back2.jpg',
		transition: 'quad:out',
		infinite: false
	});
 
	discoverFx.start([
		{x:200, w:520, d1:800, d2:1100},
		{x:350, w:270, d1:800, d2:800},
		{x:0, w:230, d1:800, d2:1100},
		{x:250, w:530, d1:800, d2:1100},
		{x:300, w:700, d1:800, d2:1100}
	]);

Descripción de las opciones

• container: El id de la capa que contendrá el efecto
• backImg: El camino a la imagen que aparecerá debajo, la misma que definimos mediante css para la capa contenedora
• frontImg: El camino a la imagen que aparecerá arriba
• width: El ancho del visor
• height: El alto del visor
• transition: El nombre de la transición que se utilizará, ej. ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• stepDuration: La duración en milisegundos de cada uno de los movimientos, aunque valor puede ser sobrescrito a nivel de paso como veremos luego
• infinity: (true/false) En caso de true la animación se repetirá infinitamente.
• infiniteDelay: El tiempo de espera en milisegundos para reiniciar la animación en caso de que la opción infinity esté activada
• initStep: {x:0, w:0} La coordenada de inicio del efecto, donde x es la posición de la burbuja y w el ancho.

Eventos

• onStep: function(index). Este evento se lanza en cada paso de la animación y recibe como parámetro el número del paso comenzando por cero
• onComplete: function(). Este evento se lanza al finalizar la animación. En caso de que infinity sea true se lanzará en cada ciclo.

Métodos

• start: Inicia la animación. Recibe como parámetro un array de coordenadas. Debes tener en cuenta que este efecto se basa en el movimiento de la burbuja que deja ver la imagen de atrás, por lo que está coordenadas definen la posición y ancho de la burbuja en cada paso. Además se puede establecer la duración de las animaciones de ambas paredes de la burbuja.
  • x: distancia de la burbuja contando desde la pared izquierda del visor
  • w: ancho de la burbuja
  • d1: duración en milisegundos de la animación de la pared izquierda de la burbuja
  • d2: duración en milisegundos de la animación de la pared derecha de la burbuja
  ^?Ver código JAVASCRIPT

  1 2 3 4 5 6 7

  discoverFx.start([ {x:200, w:520, d1:800, d2:1100}, {x:350, w:270, d1:800, d2:800}, {x:0, w:230, d1:800, d2:1100}, {x:250, w:530, d1:800, d2:1100}, {x:300, w:700, d1:800, d2:1100} ]);

• safeStart: Similar a start pero inicia después de precargar las imágenes necesarias para el efecto. NOTA: Este método requiere mootools-1.2.2.1-more.js con la clase Asset
• cancel: Cancela la animación en caso de que infinity sea true

Errores conocidos y cosas por hacer

• Hacer que el método cancel cancele completamente la animación, ahora solo cancela que no se repita en caso de infinity true
• Permitir transición entre más de dos imágenes
• Permitir hacer el efecto en dirección vertical

Licencia
Distribuido bajo Licencia MIT

Descargar
e24BubbleFx 1.0RC (218 KB, incluye los demos)

El corazón de este efecto son las coordenadas de los pasos de la burbuja, una correcta y creativa combinación de pasos puede dar como resultado un efecto único. Os invito a compartir vuestras combinaciones de pasos.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Copyright 2009. AJAX24. Powered by equipo24

• Inicio
• Ajaxigg
• Acerca de
• Contacto