viernes, 13 de junio de 2014

Ejemplo de un diaporama interactivo



1. Objetivo

Vamos a crear un diaporama muy sencillo, para que podamos aplicarle transformaciones y transiciones. Las imágenes se visualizarán con una transformación de cambio de escala, para mostrarlas con un tamaño más pequeño. Cuando pasemos el cursor con el ratón, la imagen se ampliará y se desplazará hacia la izquierda con una transición.


2. La estructura del diaporama

Vamos a usar una estructura 100% HTML5, con los elementos section, figure y figcaption :

<section id="diaporama">
<figure>
<img src="photo1.jpg" />
<figcaption>Hipopótamo</figcaption>
</figure>
<figure>
<img src="photo2.jpg" />
<figcaption>Tigre</figcaption>
</figure>
<figure>
<img src="photo3.jpg" />
<figcaption>Cebra</figcaption>
</figure>
<figure>
<img src="photo4.jpg" />
<figcaption>Suricata</figcaption>
</figure>
</section>

Centraremos el diaporama en la página con los estilos:

#diaporama {
position: relative;
margin: 0 auto;
width: 100px;
}

A los elementos figure les aplicaremos márgenes superiores e inferiores y el modo de posicionamiento:

#diaporama figure {
position: relative;
top : 0;
left: 0;
margin: 30px 0;
}


3. Las transformaciones

Las imágenes de origen tienen una dimensión de 300x200 píxeles. Vamos a usar las propiedades de transformación para pasarlas a una escala del 25%, de modo que se visualicen con un tamaño menor. Lo indicaremos en el selector figure:

#diaporama figure {
position: relative;
margin: 30px 0;
top : 0;
left: 0;
/* La transformación: cambio de escala del 25% */
-moz-transform: scale(.25);
-webkit-transform: scale(.25);
-o-transform: scale(.25);
transform: scale(.25);
/* Para la visualización del cambio de escala */
width: 75px;
height: 50px;
}

Como habrá notado, es necesario precisar el tamaño de visualización obtenido, una vez que se ha aplicado el cambio de escala, con las propiedades width y height.

El texto de las leyendas (figcaption) también se verá reducido de un 25% con la transformación. Para que no nos encontremos con un texto ilegible, vamos a darle un tamaño importante:

#diaporama figcaption {
font: 3em Verdana;
}

Se visualizará así:



4. Las transiciones

Queremos aplicar dos transiciones: un cambio de escala y un desplazamiento horizontal. Esas transiciones afectarán a todas las propiedades (all), durante 1 segundo (1s) y tendrán una velocidad constante (linear).

#diaporama figure {
position: relative;
margin: 30px 0;
top : 0;
left: 0;
/* La transformación: cambio de escala del 25% */
-moz-transform: scale(.25);
-webkit-transform: scale(.25);
-o-transform: scale(.25);
transform: scale(.25);
/* Para la visualización del cambio de escala */
width: 75px;
height: 50px;
/* Las transiciones */
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

Esas transiciones tendrán lugar cuando se pase el curso (:hover) sobre los elementos figure. La escala pasará a 1 para mostrar las imágenes con su tamaño de origen (scale(1)), el desplazamiento volverá a ser horizontal (top: 0) y será de 150 píxeles hacia la derecha (left: 150px).

#diaporama figure:hover {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
top: 0;
left: 150px;
}


5. La visualización

Al visualizar el diaporama con el cursor del ratón fuera de las imágenes, no pasará nada, ya se les ha aplicado el cambio de escala a las imágenes.


Cuando se pase el cursor sobre una imagen, tendrá lugar el cambio de escala y el desplazamiento:
Observe que en este ejemplo sencillo, es necesario conservar el cursor sobre la imagen.



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada