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!
Twittear
No hay comentarios:
Publicar un comentario