Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Efecto ´Page Peel´ con jQuery

Escrito por: Martín el 01-06-2009 09:37:25

Efecto ´Page Peel´ con jQuery

Seguramente habrás visto este efecto mil y una veces. Se trata de la famosa esquina con el borde "doblado" al estilo page curl (ese filtro antiguo de KPT, si mal no recuerdo, para Photoshop que te hacía el efecto de doblar una esquina del documento).

Pues bien, de la mano de Sohtanaka, un blog en inglés que suelo leer bastante, me encuentro este plugin que hace un efecto similar con jQuery para tu web.

Hay una demo disponible online para que veas el efecto que creo que está muy logrado a pesar de ser simple.

El tutorial está en inlgés pero es bastante sencillo de seguir.

¿La implementación?
Como siempre, muy fácil de seguir:

1) Crea el div que hará el efecto (código 1)
2) Prepara y personaliza el CSS (código 2)
3) Anima la esquina (código 3)

Código XHTML

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Código CSS

#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;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Código JAVASCRIPT

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});