Muchas veces necesitamos crear sitios atractivos para obtener mayores visitas. Podemos crear sitios atractivos de muy distintas formas; Diseñando páginas con un estilo extravagante, siendo muy minimalista, innovadores, o, utilizando únicamente JQuery y CSS.
En esta entrada os explicaré como crear un sencill0 efecto de «despliege» en una página, para mostrar, el feed RSS, por ejemplo, únicamente con CSS y JQuery.
Código HTML – Estructura del «despliege»
El contenido del despliege actuará en un div, donde estableceremos una posición relativa. La imagen del feed va agrupada en una etiqueta de enlace .
<div id="pageflip"> <a href="#"> <span class="msg_block">Subscribe via RSS</span> </a> </div>
Código CSS – Estilos
Define a la propiedad de la imagen un tamaño pequeño (50 x 50px) por defecto y inserta un posicionamiento absoluto para estar en la esquina derecha. La imagen será usada similar a la técnica «masking» de Photoshop o Flash, donde un mensaje estará oculto y solo una pequeña porción del mensaje será mostrada. Un ejemplo visual:
El actual mensaje escondido entre el efecto de despliege, está entre la clase «msg_block. Por defecto, tiene 50 x 50 píxeles, posicionado en la esquina superior derecha. La propiedad text-indent mostrará el texto fuera, para todos los que tengan CSS activado.
#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
text-indent: -9999px;
}
Código JQuery
Se expandirá (por medio de un despliege) la imagen y «msg_block» cuando nos posicionemos encima, se plegará de nuevo cuando quitemos el cursor encima del despliege:
$("#pageflip").hover(function() { //On hover...
$("#pageflip img , .msg_block").stop()
.animate({ //Anima y expande la imagen y msg_blockA
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() //Cuando nos posicionamos encima, vuelve a las dimensiones originales 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() //Cuando quitamos el cursor de encima, vuelve a las dimensiones originales 50x50
.animate({
width: '50px',
height: '50px'
}, 200);
});
Estandarización
CSS 2.1 inválido.
XHTML 1.0 Transitional válido.
Ejemplo de su funcionamiento
El concepto es muy sencillo. Si tienes alguna duda o idea puedes dejarla en los comentarios.
