Page Peel, efecto de página doblada con jQuery
5 de noviembre de 2012 Etiquetas: Efectos , Trucos 161 comentarios,
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.
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 de pruebas, 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCDCzU2r2BVJcajTlS0Zzqta1lh-6UjtkrAdMrj8iAW8SIE7UGlWgz4mdov6GuRjJkDHpCZX8EC1j-HwLsvMfE7nZxDi2MmaVvY0lGUsjJF9flGwSxYZxpugvz2JEVFgbzUb_Tb1jJQU/s0/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='"loading" + data:blog.mobileClass'>
Lo siguiente:
<div id='pageflip'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LNLUCXnuE9XVWjnGm_VNmIqhT-BwO4lyOj1jtOKErEguMAaWDS7-_tzfqxPFJcGnpnTLGDHlZ9JG7n_j6bZuJz0jN3nDHuDj4MIk27ArWCnLo3JrMaQZzC0zku52aT6f8kLKuldaJC8/s0/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.
Recuerda que usa jQuery, asà que deberás tener sólo una versión del mismo, y si usas Scriptaculous o Mootools deberás aplicar unos cambios.
CODIGO COMPLETO
<style>#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: 60px;height: 60px;z-index: 99;position: absolute;right: 0;top: 0;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 55px;height: 55px;overflow: hidden;position: absolute;right: 0;top: 0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCDCzU2r2BVJcajTlS0Zzqta1lh-6UjtkrAdMrj8iAW8SIE7UGlWgz4mdov6GuRjJkDHpCZX8EC1j-HwLsvMfE7nZxDi2MmaVvY0lGUsjJF9flGwSxYZxpugvz2JEVFgbzUb_Tb1jJQU/s0/pagina-detras.png) no-repeat right top;}#pageflipMirror {position: static;right: 0;top: 0;float: right;}#pageflip .msg_block .inner-message {position:absolute;top:45px;right:30px;}</style><script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script><div id="pageflip"><a href=""><img src="http://www.ravelrumba.com/code/demos/jquery-peelback/assets/peel-image.png" alt="" border="0" /></a><div class="msg_block"></div></div><script id="rendered-js">$(document).ready(function () {$("#pageflip").hover(function () {$("#pageflip img, .msg_block").stop().animate({width: '310px',height: '310px' },500);}, function () {$("#pageflip img").stop().animate({width: '50px',height: '52px' },220);$(".msg_block").stop().animate({width: '50px',height: '50px' },200);});});//# sourceURL=pen.js</script>
El contenido y material publicado asà como la asistencia impartida es completamente gratuita. Tu contribución permite que este sitio continúe en funcionamiento.
|  | ||
No hay comentarios:
Publicar un comentario