MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Page Peel, efecto de página doblada con jQuery

Resultado de imagen para Page Peel

Page Peel es ese popular efecto de página doblada que al pasar el cursor de despliega para mostrar "lo que que hay atrás", como si se tratase de un libro.
Hay muchas formas de hacerlo, muchas de ellas usan archivos flash lo que lo hace menos personalizable, la que veremos en esta entrada es una versión de Soh Tanaka, hecha con jQuery.

Regularmente el contenido que hay "detrás" es una imagen de suscripción al feed pero puedes poner cualquier imagen y que enlace a cualquier página, la que tú elijas.

Puedes ver un ejemplo en este blog , en la esquina superior derecha verás un doblez, al pasar el cursor encima se mostrará el contenido que hay debajo.

Para poner este efecto de página doblada en el blog entra en la Edición de HTML y antes de </head> pega el script
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

Luego antes de ]]></b:skin> pega los estilos:

/* Página doblada
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si tienes la navbar (barra de navegación) */
float: right;
z-index:9;
}
#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;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://lh4.googleusercontent.com/-2sZKIc4mNbo/UJiWU3vsjpI/AAAAAAAADPw/3NAZMqWJAT0/s000/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

Por último pega después de <body> o de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Lo siguiente:
<div id='pageflip'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'>
<img src='http://lh3.googleusercontent.com/-E0DxKFTKzhU/UJiWdesl7UI/AAAAAAAADP4/9kK-z8646YA/s000/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

En color azul verás una URL, esa es la URL de la imagen que en este caso es una invitación a sucribirse al feed, puedes cambiarla por otra (del mismo tamaño) si lo deseas.

En color rojo verás dónde debes poner el nombre de tu blog, ese será el enlace al feed de tu blog cuando el usuario dé click en la imagen posterior, pero puedes poner cualquier URL en caso de que quieras que enlace a otra página.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者