El plugin “Sequence” es un slideshow en hecho en jQuery y técnicas avanzadas de transiciones en CSS3. Por defecto no trae ningún estilo, dejándonos a nosotros esa tarea y así poder adaptarlo perfectamente a nuestra página.
CARACTERÍSTICAS
Para mi, la mayor característica que presenta este novedoso slideshow es que podemos controlar cada uno de los elementos por separado para la animación.
- Estilos de transiciones únicas creadas usando CSS3
- Soporta todos los exploradores modernos
- Soporta diseños adaptables (Responsive design)
- Soporta dispositivos touch y swiping
- Fácil de usar
- Open source
Instalando el plugin
Colocamos un link entre las etiquetas <head> donde estará la librería jQuery y el plugin de “Sequence”
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="scripts/sequence.jquery-min.js"></script>
Una vez que agregamos los archivos necesarios, procedemos a escribir el script.
<script type="text/javascript"> $(document).ready(function(){ var sequence = $("#dinvaders").sequence().data("sequence"); }); </script>
EXPLICANDO EL SCRIPT
Creamos una variable con var llamada sequence, pero puede tener el nombre que quieras.
Después de la variable, seleccionamos el contenedor $("#sequence")
, en este campo es donde colocaremos el nombre de la <div>
en que estará nuestro slideshow. Por ejemplo: <div id="sequence"></div>
En la función sequence()
será donde podremos personalizar como funciona el slideshow.
Finalmente, en la función data()
siempre deberá estar escrito “sequence”, sin importan la cantidad de slideshow que tengamos.
CREANDO MÚLTIPLES SLIDESHOW
En el caso de que necesitemos más de un slider, podremos agregarlo de forma simple al script creando una variable nueva
<script type="text/javascript"> $(document).ready(function(){ var sequence = $("#dinvaders").sequence().data("sequence"); var secuence2 = $("#dinvaders2).sequence().data("sequence"); }); </script>
Añadiendo el HTML
Lo que haremos es crear una estructura html con listas desordenadas
<div id="dinvaders"> <ul> <li> <p>Vamos volando en un avión</p> <img src="avion.png" class="imagen1" /> </li> <li> <p>Y al ver por la ventana</p> <img src="ventana.png" class="imagen2" /> </li> <li> <p>Vemos las nubes pasar!</p> <img src="nubes.png" class="imagen3" /> </li> </ul> </div>
Nota: Dentro de la lista se puede colocar cualquier elemento, pero solamente los elementos del primer nivel podrán ser animados
Escribiendo el CSS
Empezaremos con darle estilo a la div contenedora del slideshow
#dinvaders { width: 800px; height: 330px; position: relative; }
Es importante que en la div contenedora, en este caso #dinvaders, esté asignada la propiedad position: relative; ya que los elementos que estarán dentro, llevarán position: absolute;
#dinvaders > li * { position: absolute; }
¿CÓMO FUNCIONA LA ANIMACIÓN?
Esta es la parte más importante y por la cual precisábamos position: absolute; en todos los elementos dentro de la div contenedora.
Para realizar la animación debemos tener tres estilos por contenedor (opcionales), uno que da la información de la div, como por ejemplo el alto y ancho, que vendría ser el estado normal, después tenemos dos estilos más que serán los que indiquen desde donde aparecerá el objeto y por donde se irá.
Estado normal
En este estilo es donde agregamos los datos principales, como por ejemplo, el tamaño, en que posición estará el contenedor y la duración de la transición.
img.imagen1 { left: 250px; top: 10px; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
Estado de entrada
Aquí es donde asignaremos la posición que estará el contenedor en la animación (esta reemplaza a la posición de la div en estado normal) y la duración de la transición.
.animate-in img.imagen1 { left: 165px; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
Estado de salida
En este estilo es donde definiremos por donde saldrá el elemento
.animate-out img.imagen1 { left: 325px; top: 500px; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
HACERLO MÁS INTERESANTE
Si queremos hacerlo más interesante, podemos agregar a los estados de .animate-in
y/o .animate-out
la propiedad CSS3 de transform: rotate(30deg);