Page Peel no Blogger - efeito de página dobrada com jQuery
Page Peel é um popular efeito de página dobrada que ao passar mouse se desdobra para exibir "o que há por trás", como se fosse um livro.
Há muitas maneiras de fazer isso, muitas delas usam arquivos flash tornando-o menos personalizável, o que veremos neste post é uma versão do Soh Tanaka (o site do autor não existe mais), feito com jQuery.
Normalmente o conteúdo que há 'por trás' é uma imagem de subscrição no feed, mas você pode colocar qualquer imagem e 'linkar' a qualquer página de sua escolha.
Você pode ver um exemplo neste blog de teste, no canto superior direito você verá uma dobra, ao passar o mouse sobre, o conteúdo que está abaixo será exibido.
O tutorial:
Para colocar esse efeito de página dobrada no blog entra no Editar HTML e antes de </head> cole o script:
Então antes de ]]></b:skin> cole os estilos:
Em vermelho, verá onde deve colocar o nome do seu blog, esse será o link ao feed do seu blog quando o usuário clicar na imagem posterior, mas você pode colocar qualquer URL caso queira vincular a outra página.
Lembrando que este efeito usa jQuery, assim deverá haver somente uma versão do mesmo no blog, e se você usa Scriptaculous ou Mootools precisará implementar algumas mudanças.
Há muitas maneiras de fazer isso, muitas delas usam arquivos flash tornando-o menos personalizável, o que veremos neste post é uma versão do Soh Tanaka (o site do autor não existe mais), feito com jQuery.
Normalmente o conteúdo que há 'por trás' é uma imagem de subscrição no feed, mas você pode colocar qualquer imagem e 'linkar' a qualquer página de sua escolha.
Você pode ver um exemplo neste blog de teste, no canto superior direito você verá uma dobra, ao passar o mouse sobre, o conteúdo que está abaixo será exibido.
Para colocar esse efeito de página dobrada no blog entra no Editar HTML e antes de </head> cole o 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>
Então antes de ]]></b:skin> cole os estilos:
/* Página dobrávelPor último cole antes de <body> ou de:
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Alterar a 30px, caso use a navbar (barra de navegação) */
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://dl.dropbox.com/u/19945343/IM/paginafundo1.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
<body expr:class='"loading" + data:blog.mobileClass'>O seguinte:
<div id='pageflip'>Em azul, verá um URL, este é o URL da imagem que neste caso é um convite para assinar o feed, você pode alternar para outro (do mesmo tamanho), se desejar.
<a href='http://nome-do-meu-blog.blogspot.com/atom.xml'>
<img src='https://dl.dropbox.com/u/19945343/IM/pagina-d.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>
Em vermelho, verá onde deve colocar o nome do seu blog, esse será o link ao feed do seu blog quando o usuário clicar na imagem posterior, mas você pode colocar qualquer URL caso queira vincular a outra página.
Lembrando que este efeito usa jQuery, assim deverá haver somente uma versão do mesmo no blog, e se você usa Scriptaculous ou Mootools precisará implementar algumas mudanças.
