04/07/2018

Efeito de carregamento de Páginas (Fade In / Out) [003]


Yo queridos bunnies, como vão hoje? Venho trazer mais um efeito de entrada de páginas para vocês. Esse efeito é bem similar ao Entradas Fade no blogger, a diferença entre ele é que o outro o efeito aparece ao abrir a pagina, enquanto esse aparece quando clicamos em algum link que direciona pagina. Como:. menus, paginação ou quando clicamos para abrir uma postagem. Ainda é possível escolher a cor do efeito. Aconselho sempre usar uma cor similar ao fundo do seu background, os créditos para esse tutorial está no final do blogger.


1. Vá ate seu HTML e utilizando CTRL+F procure por </head> e acima adicione:

Códigos
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
} }); //]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

Salve! A parte marcada em roxo/azul é a cor do fundo, basta mudar.

Você também pode usar este efeito apenas em alguns links, por exemplo, se você quer que apareça somente quando clicar nos títulos. Como por exemplo o "Inicio" "Postagens antigas" "Postagens Recentes". Basta substituir esse código:

$("a").click(function(event){

por esse:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

Infelizmente essa opção na navegação não é em todos os blogs que ele funciona, e também aconselho em blogs que não sejam muito pesados. Principalmente se seu blog for pesado e com muitos scripts. 

Créditos: Coelho Alado. 

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345