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