Cajas con animaciones usando jQuery

En Build Internet explican como crear animaciones en cajas con cualquier contenido usando jQuery, son muy impresionantes y atractivas, y pueden ser muy útiles cuando pensamos en una galería de imágenes que muestre cualquier leyenda como el título de la imagen o fotografía, una descripción corta con algunos enlaces etc.

La idea es muy simple, ponen una capa o div, que actúa como una ventana, en donde los otros dos elementos se ven a través de esta, uno es visible, en este caso la imagen, y la otra es la que tendrá la animación, que en este caso, es donde están los textos o leyenda y/o otra imagen.

Se puede usar ya sea una o todas las distintas animaciones en una misma galería, y si no vas a usar alguna, será necesario que borres la parte del código que correponde a esa animación; en todo el código vienen los comentarios donde se puede identificar cada uno.

DEMOSTRACIÓN

Muy mono ¿verdad?, veamos como hacerlo...

¿Cómo usarlo? 

1. Primero, necesitas jQuery que agregas antes de </head>, y si ya lo tienes, no lo agregas.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

2. Agregar las funciones para cada animación, aquí ya vienen agregadas las 6 diferentes animaciones, y esto se pone después de jQuery:

<script type='text/javascript'>
//<![CDATA[
            $(document).ready(function(){
                //Deslizamiento Vertical
                $('.boxgrid.slidedown').hover(function(){
                    $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
                }, function() {
                    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
                });
                //Deslizamiento Horizontal
                $('.boxgrid.slideright').hover(function(){
                    $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
                }, function() {
                    $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
                });
                //Deslizamiento en diagonal
                $('.boxgrid.thecombo').hover(function(){
                    $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
                }, function() {
                    $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
                });
                //Deslizamiento parcial (muestra una parte del fondo)
                $('.boxgrid.peek').hover(function(){
                    $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
                }, function() {
                    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
                });
                //Deslizamiento que muestra completa la leyenda
                $('.boxgrid.captionfull').hover(function(){
                    $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
                }, function() {
                    $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
                });
                //Deslizamiento que muestra parcialmente la leyenda
                $('.boxgrid.caption').hover(function(){
                    $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
                }, function() {
                    $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
                });
            });
//]]>
        </script>

3. Luego, agregar el CSS, yendo al Diseñador de Plantillas en el campo de Añadir CSS:

.boxgrid{
width: 325px; /*ancho de la imagen*/
height: 260px; /*alto de la imagen*/
margin:5px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
 }
.boxgrid h3 {
padding: 0;
margin-left: 10px;
color: #fff;
}       
.boxgrid img{
position: absolute;                  
top: 0;                  
left: 0;                  
border: 0;              
}              
.boxgrid p{                  
padding: 0 16px; /*usar solo si se pone en una sección*/
color:#afafaf;                  
font-weight: bold;                  
font-size: 12px;              
}
.boxgrid a {
margin: 0;
padding: 0;
text-decoration: underline;
}                       
.boxcaption{              
float: left;              
position: absolute;              
background: #000;              
height: 100px;              
width: 100%;              
opacity: .8;                          
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
top: 0;
left: 0;        
}           
.captionfull .boxcaption {                
top: 260;              
left: 0;            
}           
.caption .boxcaption {                  
top: 220;                  
left: 0;              
}

Claro que puedes personalizar los marcos y fuentes, o hacer cualquier otro cambio en el CSS para adaptarlo.


4. Finalmente lo que falta es el HTML, con las imágenes, textos y enlaces que queremos mostrar, ya sea en una sección de la plantilla, por ejemplo debajo del header, o en una página estática.

Este es el HTML de los 6 ejemplos de la demostración y que puse en una página estática, nótese que agregue el atributo: padding a la etiqueta p, ya que si no tiene atributos cuando se agrega en el editor, desaparecerá y habrá problemas para que se apliquen los estilos. Si lo vas a poner ahí, será necesario quitar del CSS la linea que corresponde al padding,  para dicha etiqueta y que puse de verde.

<!--Deslizamiento que muestra completa la leyenda--><div class="boxgrid captionfull">
<img alt="" src="URL DE LA IMAGEN" />
<div class="cover boxcaption">
<h3>Titulo de la imagen</h3>
<div style="padding-left: 10px;">
Texto aquí<br />
<a href="#" target="_BLANK">Texto Enlace</a></div>
</div>
</div>
<!--Deslizamiento que muestra parcialmente la leyenda--><div class="boxgrid caption">
<img alt="" src="URL DE LA IMAGEN" />
  <div class="cover boxcaption">
<h3>Título</h3>
<div style="padding-left: 10px;">
Texto aquí<br />
<a href="#" target="_BLANK">Texto enlace</a></div>
</div>
<!--Deslizamiento Horizontal--><div class="boxgrid slideright">
<img alt="" class="cover" src="URL DE LA IMAGEN" />
 <h3>Título</h3>
<div style="padding-left: 10px;">
Texto aquí<br />
<a href="#/" target="_BLANK">Texto enlace</a></div>
</div>
<!--Deslizamiento en Diagonal--><div class="boxgrid thecombo">
<img alt="" class="cover" src="URL de la imagen" />
  <h3>Título</h3>
<div style="padding-left: 10px;">
Texto aquí<br />
<a href="#" target="_BLANK">Texto enlace</a></div>
</div>
<!--Deslizamiento Vertical--><div class="boxgrid slidedown">
<img alt="" class="cover" src="URL de la imagen" />
           <h3>Título</h3>
<div style="padding-left: 10px;">
Arte, Música, Mundo<br />
<a href="#" target="_BLANK">Texto enlace</a></div>
</div>
<!--Deslizamiento parcial que muestra una parte del fondo--><div class="boxgrid peek">
<a href="#" target="_BLANK"><img src="URL DE LA IMAGEN PEQUEÑA" /></a><a href="#" target="_BLANK"><img alt="" class="cover" src="URL de la imagen visible" /></a>
            </div>

En donde está el gatito "#" (almohadilla) es donde pones los enlaces respectivamente, y en todo lo demás, y que está de rojo, dice lo que necesitas poner.

IMPORTANTE: Deberás tener en cuenta el ancho y alto de las imágenes, que vienen configuradas como 325 pixeles de ancho por 260 pixeles de alto, y cambiar todos los valores (en el CSS y el código del  paso 2) si vas a usar otra medida.

Debido al éxito de esto, crearon un plugin al que llamaron "Mosaico", es ligero para crear estas animaciones, luego te diré como usarlo, aunque si ya sabes, puedes echar un vistazo y empezar a usarlo si te gusta.

Está explicados de forma general, y de ser necesario publicaré otro post explicando paso a paso como ponerlo en una sección, por ejemplo, debajo de la cabecera.

Siéntete libre de compartir tus ideas e inquietudes. Buen inicio de semana ;)