Pasador de imágenes html5

Vamos a ver una forma alternativa de definir un pasador de imágenes usando tecnologías de HTML5, en concreto, transiciones de CSS3.

Con este método nos encontramos con algunas ventajas pero también con algunas desventajas:

Ventajas:

  • Las animaciones serán más suaves ya que es el navegador el que se encarga de hacerlas de forma nativa.
  • Podemos cambiar el tipo de animación simplemente modificando la hoja de estilos.
  • En los navegadores que no soporten transiciones el pasador seguirá funcionando, sólo que no se verán las animaciones.
  • El código javascript necesario se reduce.

Desventajas:

  • Con algún tipo de animaciones tendremos que bloquear el pasador mientras se realiza la animación, para que no se desmonte nuestra maqueta y no se vea feo.
  • En navegadores antiguos (Explorer versión menor a la 10) no se verán las animaciones.

Funcionamiento:

Lo primero que tenemos que hacer es inicializar los elementos que queremos animar. En nuestro caso pondremos la clase "active" al elemento actual, y las clases "prev" y "next" al elemento anterior y siguiente respectivamente

Para las animaciones definiremos 3 clases "center", "prev" y "next". Estas clases serán las posiciones finales de los elementos. Por ejemplo, si le damos al botón siguiente. El elemento con clase "active" pasará a tener la clase "prev" y el elemento con la clase "next" pasará a tener la clase "center".

.slider div.images div.next {
	left: 100%;
}
.slider div.images div.prev {
	left: -100%;
}
.slider div.images div.center {
	left: 0;
}

Para que funcionen las animaciones definiremos una clase "animate" a la cual le pondremos la transición a utilizar:

.slider div.images div.animate {
	transition: left 400ms;
	-moz-transition: left 400ms;
	-webkit-transition: left 400ms;
	-ms-transition: left 400ms;
	-o-transition: left 400ms;
	z-index: 2;
}

Luego sólo tendremos que ir añadiendo y quitando clases por medio de javascript.

El funcionamiento del pasador se puede ver aquí:

El código fuente se puede ver aquí

Cambiando el css de las classes "next", "prev" y "center" y el tipo de transición podemos tener distintas animaciones para este pasador, en el ejemplo, las imágenes se mueven en horizontal, pero sería muy sencillo hacer que se moviesen en vertical, simplemente cambiando la propiedad left por top.

Comentarios

Comentario de Renz - 05 de Abril de 2013 - 06:00
Gran aporte!
Comentario de Mario - 18 de Junio de 2013 - 22:54
Gracias por el aporte!...además de claro..está bien explicado para ir introduciendo cambios
Comentario de Kenna - 03 de Agosto de 2013 - 00:39
Excelente Gracias!
Comentario de ALEX - 06 de Enero de 2014 - 01:15
Excelente aporte
Comentario de Ramon - 17 de Junio de 2014 - 19:54
Muchas gracias por el ejemplo. Esta muy bien, sencillo y potente. Unicamente cuando solo tiene una foto tiene un coportamiento extraño; la foto no se muestra y lo que se muestra es un cuadro en blanco y al pulsar a "Siguiente" aparece y desaparece la foto.
Comentario de Marlon - 26 de Septiembre de 2014 - 20:29
Funciona perfecto, justo lo que necesitaba
Comentario de Dan - 02 de Noviembre de 2014 - 20:15
hola esta muy bien y me funciona al 100...ahora me podrias apoyar para quitar los botones de siguiente y anterior y que la transicion sea automatica cada xxx segundos... gracias
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí