Efecto ´Page Peel´ con jQuery

Escrito por: Martín el 01-06-2009 09:37:25 y leído 1840 veces

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)
});

Categorías: •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

page flip jquery • recursos jquery • jquery page flip • jquery pageflip • pageflip jquery • jquery recursos • efecto page peel • efectos jquery • levantar esquina con jquery • efecto jquery • efectos jquery 2011 • page peel effect jquery • page flip con jquery • efecto page flip jquery • esquinas dobladas jquery • efecto page flip con jquery • cache:zOR2n_6fqz4J:www martiniglesias eu/buscador/doblar-esquina-de-un-div-con-jquery como doblas un div • flip page jquery • page peel jquery • jquery efecto hoja doblada • efecto flip jquery • efecto page • jquery flip page • pageflip html5 • boton jquery expand • flip esquina en mi web • efectos jquery esquina • esquina hoja hover • jquery page flip pdf • jquery book flip • page peel • simple page peel para blogger • page flip en jquery • book flip jquery • efectos en un archivo pdf jquery • efecto book jquery • horizontal scrollpane jquery • lista de paginas con esquina doblada en flash • kpt page curl 3 0 • jquery barra plegar div • esquina pagina jquery • filtro de KPT (KPT Page Curl 3 0) • levantar esquina jquery • pagepeel para photosho • jquery esquina • efecto page flip javascript • peel jquery • javascript efecto flip page • jquery esquina doblada • efecto pageflip con java • jquery hover out • jquery page • mootools levantar div como hoja de papel • jquery page peel • efecto pageflip en jquery • efecto de peel page en el borde • efecto cambio de pagina jquery#sclient=psy-ab • jquery pag flip • paginas que doblan la esquina con script • pdf to flip javascript php • jquery doblez • page curl para android • kpt page peel • js jquery page flip • descargar filtro de KPT Page Curl 3 0 • doblar web como una hoja jquery • efectos plugins para plegar esquinas fotoshop • accion photoshop esquina doblada • implementar pageflip en mi web • efecti flip page jquery • paginador con jquery • efecto flip en blogger • pageflip con div • hacer el efecto flip con imagenes • efecto book js • lista pliega jquery • PagePeel Effect – Plugin jQuery para crear efecto llamativo#sclient=psy-ab • pageflip to pdf • page flip curl jquery • jquery plegar listado • hoja doblada con js • jquery para efecto de doblar una hoja • efecto peel js • flip hoja jquery • efecto doblar pagina con jquery • efecto hoja doblada en js • page curl en mi web • page flip jquery para explorer • web efecto flip out • efecto doblar las esquinas de una tabla con javascript • efecto jquery easy de ubicacion de div#p • efecto curl javascript • efecto pagina doblada web • jquery efectos divs • Efecto Flip Page jquery • javascript hoja doblada • efecto de peel en el borde • efecto expandir div • jquery efecto book • efectos jquery bordes •