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.