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 TanakaEl sitio del autor ya no existe, 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 TanakaEl sitio del autor ya no existe, 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/AVvXsEieQmg8yXyt5tLdSBDRMiOFAyrIJFJAWI2Bb1jvs3ftmrweM-xCtAIg-xOYjm-1dUxe6_GAJOfYa_aIugEnIvctN-dqrV_jwVc1NGVxnxtc2dcVWNYq341KLVHve58x8ZG1D5rkFZV0IGM/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/AVvXsEhioYSXkUsZTeXl9WcUPukngP4qfwkcwPnVJDcibxoSNG-xF39DYac_EZiD6yiG5ho4HnTG1xwA_AcWtTUls4d_AvMG65_i3qbbLhIUeSZ_DT4VFcgdNWze6mIHhX2XlWpETPnv3WwOuo8/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.
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.
No comments:
Post a Comment