Sequence, un responsive slideshow en jQuery con transiciones CSS3

  • by Ruby Simpson

    • 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);

    Scroll to top