sábado, 29 de septiembre de 2012

Efecto Navegación Circular

[caption id="attachment_196" align="aligncenter" width="480"]efecto navegacion circular efecto navegación circular[/caption]

Vamos a crear un interesante efecto hover para una navegación de imagen utilizando CSS3. La idea es ampliar una navegación circular con una flecha y hacer una burbuja con una miniatura. En nuestro ejemplo, se muestra la miniatura de la imagen anterior y posterior deslizante en torno a las flechas. El efecto se hace con transiciones CSS3.

El HTML

Para lograr este pequeño efecto CSS3  nuestra navegacion tendra una estructura como esta:
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(../images/thumbs/1.jpg);"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(../images/thumbs/3.jpg);"></div>
</a>
</div>

En nuestra demostración vamos a hacer una plantilla de jQuery fuera de este y agregar dinámicamente las miniaturas de las imágenes anterior y posterior del slider. Sin embargo, para mostrar cómo el efecto de círculo en expansión se lleva a cabo, sólo les mostraremos esta parte:

El CSS

Vamos a ver ahora, como agregar el estilo para esta navegación

Asumiento que tenemos algun contenedor relativo alrededor, estableceremos los elementos del link con una posición absoluta. El alto y ancho sera de 70 pixeles, así no tendremos un area tan pequeña para el efecto hover.
cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;

El elemento span, que contendrá las flechas como una imagen de fondo tendrá una altura inicial y la anchura de 46 píxeles. Con el fin de hacer que se vea como un círculo, tenemos que establecer el radio de frontera (border radius) a la mitad de su anchura/altura. Con el truco margen del 50% y negativo, lo establecemos en el centro del elemento link. A continuación, se define la transición que tendrá todas las propiedades en cuenta con una duración de 400 ms y con ease, como la función de aceleración:
.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}

Los fondos de imagen de los spans (flecha derecha y la flecha izquierda):
cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
background: #666 url(../images/next.png) no-repeat center center;

El div con el thumbail como imagen de fondo inicialmente va a tener una altura y anchura de 0 píxeles. Va a ser absoluta y también se coloca en el centro del elemento link. Radio Frontera (border radius) y los márgenes van a ser 0 inicialmente. La imagen de fondo llenará todo el elemento, por lo tanto, vamos a dar al fondo una anchura y la altura de 100%. La transición de este elemento será para todas las propiedades con una duración de 200 ms y con la función de ease-out para aliviar:
n>cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

Ahora, vamos a definir cuáles son los elementos que se verían al hacer hover

El span se incrementará a 100 píxeles de anchura y altura y, en consecuencia, vamos a establecer los márgenes negativos y el radio de frontera (border radius) a la mitad de eso. Vamos a aumentar el tamaño de la imagen de fondo un poco. Además, vamos a cambiar el color de fondo y la opacidad:
cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;

Y, por último, el elemento div de la imagen se ampliará  un poco, a 90 píxeles, por lo que aún podemos ver el elemento span alrededor, aparece como una frontera (border) para el thumb. También vamos a aumentar el tamaño de fondo un poco y establecer los márgenes negativos y el radio de frontera (border radius) a la mitad del ancho del elemento:
cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;

Y eso es todo! Un habil efecto sólo con CSS3! Echa un vistazo a la demo para ver cómo se ve integrado en un control deslizante con el que muestra la de miniatura anterior y el siguiente (con un navegador moderno, lo siento IE9 no está incluido)! Espero que hayan disfrutado esta pequeña guía y les sea útil.

Demo: Ver                                         Archivos: Descargar

 

No hay comentarios:

Publicar un comentario