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 <a>.

<div id="pageflip">

<a href="#">

<img src="page_flip.png" alt="" />

<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.

Compartir/Guardar