SECCIONES DEL ARTÍCULO ::

Para poder obtener una idea sólida de todo el proceso desde principio a fin, a continuación se detallan las secciones del artículo. Recuerda que estos efectos funcionaran únicamente en navegadores actualizados que soporten el standard CSS3, tales como Chorme, IE10, o Mozilla.

1. Introducción: aprenderemos los conceptos básicos referentes a las transiciones CSS3 y las animaciones mediante keyframes

2. HTML markup: Creación del código HTML para el slider de imágenes.

3. Estilos CSS: Creando la hoja de estilos para mostrar el slider.

4. Animación Keyframes CSS3: Añadiremos una animacion al slider, explicando los diferentes procesos que tienen lugar aquí.

5. Barra de progreso: añadimos una barra de progreso de carga para el slider

6. Etiquetas: añadimos una etiqueta para mostrar información de la imagen

7. Transiciones CSS3: animamos la etiqueta para hacer que aparezca sobre la imagen

8. Pausa y Reinicio: pausamos el slider y volvemos a ponerlo en marcha

9. Demostración: comprueba el slider en acción

10. Conclusiones: consideraciones finales

1. Introducción

Para seguir este tutorial, tener un conocimiento básico sobre CSS y especialemente con las transiciones y animaciones keyframes es bastante importante. Usando este simple concepto, veremos como construir un slider de imagenes totalmente funcional.

CONCEPTOS BÁSICOS DE LAS TRANSICIONES CSS3

Normalmente, cuando cambias un valor CSS, el cambio es instantaneo. Ahora, gracias a la propiedad 'transition' podemos animar facilmente el estado del viejo al nuevo.

Podemos usar hasta 4 propiedades de transiciones por este orden:

1. transition-property: define el nombre(s) de la propiedad CSS sobre la cual se aplicará la transición.

2. transition-duration: define la duración durante la cual la transición deberá perdurar en el tiempo.

3. transition-timing-function: determina como se calculan los valores intermedios de la transición. Los efectos del timing-function son comunmente llamados 'easing functions'.

4. transition-delay: define un retraso antes de que empiece la transición.

De momento, las transiciones CSS3 son soportadas por Safari 3.2, Chrome, Firefox 4+, Opera 10.5+ y IE10. Dado de la tecnología es relativamente nueva, los prefijos para diferentes navegadores son necesarios. Así pues, la sintaxis es excatamente la misma para todos ellos con la unica diferencia del llamamiento a la función. Los vamos a omitir en los fragmentos de este artículo, pero recuerde incluirlos en los fragmentos de su código.

Vamos a ver como aplicar una transición sencilla a un enlace cualquiera:

a {
	color: #000;
	transition-property: color;
	transition-duration: 0.7s;
	transition-timing-function: ease-in;
	transition-delay: 0.3s;
}

a:hover {
	color: #fff;
}

Cuando asignamos una transición a un elemento también podemos usar su forma corta:

a  { 
	color: #000;
	transition: color 0.7s ease-in 0.3s;
}

a:hover {
	color: #fff;
}

En la W3C encontramos una lista de todas las propiedades animables

CONCEPTOS BÁSICOS EN LA ANIMACIÓN CSS3

Las animaciones en CSS nos permiten crear animaciones sin necesidad de usar JavaScript mediante el uso de un set de keyframes.

A diferencias de las transiciones CSS, las animaciones keyframes son sólo soportados por navegadores con -Webkit, Firefox y pronto IE10. Los navegadores incompatibles simplemente ignorarán el codigo de animación.

Las propiedades de la animación son ocho:

1. animation-name: especifica el nombre de la regla @keyframes para la animación.

2. animation-duration: define la duración de tiempo para completar la animación.

3. animation-timing-function: describe como progresa una animación a lo largo de un ciclo.

4. animation-itineration-count: define el numero de veces que la animación se repetirá antes de pararse.

5. animation-direction: configura la animacion para comenzar marcha atras o en ciclos alternos.

6. animation-play-state: determina si una animación está en marcha o parada.

7. animation-delay: define cuando comienza la animación.

8. animation-fill-mode: especifica como una animacion CSS debe aplicar estilos a su objetivo antes y despues de ejecutarse.

Veamos a continuación como aplicar una animación simple a un elemto <div>:

/* Este es el elemento <div> donde se aplica la animación */

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out; 
   animation-delay: 0.5s;           
   animation-iteration-count: 2;  
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out; 
   -moz-animation-delay: 0.5s;           
   -moz-animation-iteration-count: 2;  
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out; 
   -webkit-animation-delay: 0.5s;           
   -webkit-animation-iteration-count: 2;  
   -webkit-animation-direction: alternate;
}

/* Este es el codigo del set @keyframes para la animacion  */

@keyframes move {
   from { 
      transform: translateX(0); 
   }
   to { 
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from { 
      -moz-transform: translateX(0); 
   }
   to { 
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from { 
      -webkit-transform: translateX(0); 
   }
   to { 
      -webkit-transform: translateX(100px);
   }
}

Pero de igual manera a la anterior, podemos usar la forma corta correctamente para configurar todas las propiedades de la animacion de una vez:

div { 
   animation: move 1s ease-in-out 0.5s 2 alternate; 
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate; 
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; 
}

KEYFRAMES

Cada KeyFrame describe como un elemeto animado se debe comportar en un punto dado de la secuencia de la animación. Las keyframes cogen un valor en porcentaje para especificar el tiempo: 0% es el inicio de la animación mientras que 100% repesenta el final de la misma. Puedes adicionalmente añadir tantos keyframes intermedios como quieras para configurar la animación especificando su %. Esto podría quedar tal que así:

/* Animacion de 0% a 100% */

@keyframes move {
   0% { transform: translateX(0); }
   100% { transform: translateX(100px); }
} 

/* Animacion con keyframes intermedios */

@keyframes move {
   0% { transform: translateX(0); }
   50% { transform: translateX(20px); } 
   100% { transform: translateX(100px); }
}

Encontraremos en la WC3 bastante información detallada sobre las Animaciones CSS3.

ESTRUCTURA BÁSICA DE NUESTRA ANIMACIÓN

Ahora que conocemos como trabajan las transiciones y animaciones, veamos como crear nuestro slider de imagenes usando sólo CSS3. El siguiente esquema muestra gráficamente como la animación debería funcionar:

Como podéis ver, el slider será un contenedor dentro del cual se mostrarán las imagenes.

La animación es muy simple: la imagen sigue un camino definido, animando la propiedad 'top' y cambiando la propiedad 'z-idex' y 'opacity' cuando la imagen vuelve a su posición original.

Entremos de lleno con el código HTML para crear el slider.

2. Marco HTML

El código HTML resulta también muy simple; está todo organizado y es SEO-amigable. Veamos el código al completo y seguidamente veremos los detalles de como funciona todo.

<div class="container">
   <div id="content-slider">
      <div id="slider">  <!-- Contenedor del Slider -->
         <div id="mask">  <!-- Mascara -->

         <ul>
         <li id="first" class="firstanimation">  <!-- ID  para etiqueta y clase para animacion -->
         <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
         <div class="tooltip"> <h1>Cougar</h1> </div>
         </li>
 
         <li id="second" class="secondanimation">
         <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
         <div class="tooltip"> <h1>Leones</h1> </div>
         </li>

         <li id="third" class="thirdanimation">
         <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
         <div class="tooltip"> <h1>Snowalker</h1> </div>
         </li>

         <li id="fourth" class="fourthanimation">
         <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
         <div class="tooltip"> <h1>Howling</h1> </div>
         </li>

         <li id="fifth" class="fifthanimation">
         <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
         <div class="tooltip"> <h1>Sunbathing</h1> </div>
         </li>
         </ul>

         </div>  <!-- Fin de Mascara -->
         <div class="progress-bar"></div>  <!-- Barra Progreso -->
      </div>  <!-- Fin Contenedor Slider -->
   </div>
</div>

1. div id='slider': Este es el contenedor principal para el slider. No tiene ninguna funcion en particular aparte de que lo necesitaremos para pausar la animación

2. div id='mask': Usaremos este div para esconder todo lo que ocurra fuerra del slider. Además de esconder el contenido, la mascara nos permitirá mostar el contenido del slider.

3. li id='first' class='firstanimation': Cada elemento de la lista tiene un ID y una clase. El ID muestra la etiqueta, y la clase está ligada a la animación que tiene que ocurrir.

4. div class='tooltip': es simplemente para mostrar el contenido de la etiqueta de la foto. Se puede modificar a gusto, por ejemplo, haciendo que sea clickeable y añadir una descripción corta.

5. div class='progress-bar': contiene la funcion que muestra la barra de progreso de la animación

Ahora le toca el turno al archivo CSS

3. Estilo CSS

Vamos a crear la estructura básica para el slider. Tendrá el mismo tamaño que las imágines. La propidedad 'border' será útil para crear un marco alrededor de la misma.

/* ESTRUCTURA DEL SLIDER */

#slider {
   background: #000;
   border: 5px solid #eaeaea;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 320px;
   width: 680px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
}

La clase 'mask' esconderá todos los elementos fuera del slider; su altura debe ser igual a la altura del slider.

/* OCULTAR TODO FUERA DEL SLIDER */

#mask {
   overflow: hidden;
   height: 320px; 
}

Finalmente, para mostrar las imágenes, tendremos 'position: absolute' y 'top: -325px' de forma que todas las imágenes son posicionadas fuera del slider.

/* LISTA DE IMAGENES */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li { 
   width: 680px;  /* Ancheo Imagen */
   height: 320px; /* Alto Imagen */
   position: absolute;
   top: -325px;	/* Position Original - Fuera del Slider */
   list-style: none;
}

Y con estas pocas lineas de código, hemos creado nuestro slider. Ahora sólo nos falta añadir la animación.

4. Animación de Keyframes CSS3

Antes de comenzar con la animación, hay que definir ciertos parametros para poder obtener una buena vista de la animación.

Como sabemos, la duración total de la animación será de 25 segundos, si hay 5 imagenes y cada una dura 5 segundos entre que entra, se queda y se va; pero debemos saber cuantos keyframes corresponden a 1 segundo.

Así pues, vamos a estudiar una serie de operaciones que te darán el número de exacto de keyframes basado en las imagenes que tenemos y la duración total de la animación. Estos serían los calculos:

1. Definir el número total de imganes para el slider: 5

2. Definir la duración de la animación para cada imagen: 5 segundos

3. Definir la duración total de la animación para las 5 imagenes: 25 segundos.

4. Calcular cuantos keyframes son iguales en un segundo: para ello, divimos el total de numeros de keyframes (100) por el tiempo total de la animación (25) >> 100 keyframes / 25 segundos = 4 keyframes >> 1 segundo

Con estos calculos, ahora podemos aplicarl la animacion CSS al slider.

#slider li.firstanimation {
   animation: cycle 25s linear infinite;		
}

#slider li.secondanimation {
   animation: cycletwo 25s linear infinite;	
}

#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;		
}

#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;		
}

#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;		
}

Una vez que las propiedades de la animación se hayan asignado, necesitaremos usar keyframes para configurar el movimiento de la animación.

Siguiendo este principio, podemos conectar la animación de uno a otro incluso si las imagenes están separadas, lo que nos dará un loop infinito.

Hemos añadino las propiedades opacity y z-index para hacer la tansición de una imagen a otra algo más atractivo.

Como puedes observar en este código, la primera animación contiene más keyframes que el resto. La razón de esto es por que cuando comienza la galería, la primera imagen ya es posicionada para dar paso a la segunda; y por eso mísmo, cuando la imagen final ha terminado la animación necesita tener keyframes adicionales para dar entrada a la primera imagen sin que haya un corte entre los ciclos de la animación.

Aquí está todo el código para la animación:

/* ANIMACION */

@keyframes cycle {
   0%  { top: 0px; } /* Cuando empieza, la primera imagen es visible */
   4%  { top: 0px; } /* Posicion Original */
   16% { top: 0px; opacity:1; z-index:0; } /* De 4% a 16 % = por 3 segundos la imagen es visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* De 16% a 20% = por 1 second sale la imagen */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Vuelve a la posición original */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* De 96% a 100% = por 1 second entra la nueva imagen */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

Una vez creada la animación, tenemos que añadir una barra de progreso para mostrar la duración de la animación en pantalla.

5. Barra de Progreso

El proceso para animar la barra de progreso se hace de la misma forma que para animar el slider. Primero, creamos la barra de progreso en sí:

/* PROGRESS BAR */

.progress-bar { 
   position: relative;
   top: -5px;
   width: 680px; 
   height: 5px;
   background: #000;
   animation: fullexpand 25s ease-out infinite;
}

No tengas miedos de la sintaxis aquí. Tiene la misma función que 'from to'; puedes ver que los keyframes establecen la aparición y desaparición de cada imagen.

/* ANIMATION BAR */

@keyframes fullexpand {
   /* In these keyframes, the progress-bar is stationary */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* In these keyframes, the progress-bar starts to come alive */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

6. Etiquetas

El slider ya está casi completo, pero aun falta añadir unos pequeños detalles para hacerlo más funcional. Vamos a ponerle etiquetas a las fotos que serán visibles cuando se pase el raton sobre ellas:

#slider .tooltip {
   background: rgba(0,0,0,0.7);
   width: 300px;
   height: 60px;
   position: relative;
   bottom: 75px;
   left: -320px;
}

#slider .tooltip h1 {
   color: #fff;
   font-size: 24px;
   font-weight: 300;
   line-height: 60px;
   padding: 0 0 0 10px;
}

Aquí sólo hemos hecho que los titulos de lás imágenes sean visibles, pero puedes hacer lo que sea para personalizar los textos, enlaces o lo que quieras.

7. Transiones CSS3

Ya hemos visto como aplicar transiciones a los elementos; ahora hagamos lo mismo para las etiquetas.

Si recuerdas, añadimos un Id a cada lista (first, second, etc...) para tener la etiqueta asociada a la imagen.

#slider .tooltip {
…
   transition: all 0.3s ease-in-out; 
}

#slider li#first: hover .tooltip, 
#slider li#second: hover .tooltip, 
#slider li#third: hover .tooltip, 
#slider li#fourth: hover .tooltip, 
#slider li#fifth: hover .tooltip {
   left: 0px;
}

8. Pausa y Reinicio

Para permitir a los usuarios poder observar una imgaen en concreto, deberíamos poder parar la animación cuando se pasa el ratón por encima. (Tambien hay que parar la de la barra de progreso.

#slider: hover li, 
#slider: hover .progress-bar {
   animation-play-state: paused;
}