Page Peel, efeito de página dobrada com jQuery

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:
<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ável
----------------------------------------------- */
#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;
}
Por último cole antes de <body> ou de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
O seguinte:
<div id='pageflip'>
<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 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.
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.
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Page Peel, efeito de página dobrada com jQuery
Page Peel, efeito de página dobrada com jQuery
Page Peel no Blogger - efeito de página dobrada com jQuery
http://1.bp.blogspot.com/-zjxyeElSJGA/UKbDg7B5BqI/AAAAAAAAAqs/TBSSWR7t6Uk/s1600/Page_Peel_o.png
http://1.bp.blogspot.com/-zjxyeElSJGA/UKbDg7B5BqI/AAAAAAAAAqs/TBSSWR7t6Uk/s72-c/Page_Peel_o.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/11/page-peel-efeito-pagina-dobrada-com-jquery.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/11/page-peel-efeito-pagina-dobrada-com-jquery.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar