Entrar em um site que carrega outra página a partir de um link qualquer, ‘sem nenhum efeito’, já é uma alternativa sem graça. Se você já visualizou uma transição em algum site por aí (e provavelmente isso já aconteceu), pode perceber como é ‘mais bonito’ utilizar esse tipo de técnica, principalmente em sites institucionais. Hoje trabalharemos o efeito FadeIn/FadeOut no carregamento de uma nova página. O resultado final você pode conferir nesse link!

O primeiro passo é adicionar o estilo para ocultar o seu body. Você poderá fazer isso no CSS:

body{ display:none;}

ou, se preferir, diretamente com o uso do Jquery (não se esqueça de chamar a bilioteca na página antes!)

$(document).ready(function() {
$("body").css("display", "none");
});

Feito isso implementaremos o efeito fadeIn() quando a página inicial for carregada. Para isso, adicione em seu código o a linha body.fadeIn(), setando um valor de tempo, se necessário: 

$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(slow);
});

Com essas passos você fará com que sua página seja carregaa com o efeito FadeIn. A próxima etapa será empregar o FadeOut nos links para outras páginas. Para que todo link receba esse efeito, trabalhe como o código abaixo:

$(document).ready(function() {
$("a").click(function(){
$("body").fadeOut();
});
});

Contudo, como o comportamento padrão de um link é o redirecionamento para outra página no momento em que é clicado, devemos informar ao documento que o redirecionamento ocorrerá apenas após o efeito de Fade. Para isso, altere seu código para:

$(document).ready(function() {
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}

});

Note que criamos uma função redirectPage(), que recebe o valor do link inicial, e somente após o fadeOut a página linkada é realmente chamada. A função para o evento event.preventDefault() previne que o redirecionamento imediato ocorra, ‘dando tempo’ para o fade.

Para realizar o teste, crie duas página linkadas entre si com o código acima. Adicione algum texto ou imagem para que o efeito possa ser percebido. Ou então baixe os arquivos nesse link e faça o testem realizando algumas modificações para perceber como funciona.

Caso você queira aperfeiçoar sua página ainda mais, em sua folha de estilo sete um valor de background para html, alterando a cor do fundo entre um fade e outro.

html {
background-color: #000000;
}

O ideal é que a cor definida seja o mais parecida possível com o seu background real. Se você quiser podem ser utilizadas imagens também!

Para ver esse tutorial em funcionamento, clique aqui! Experimente também alterar o fadeIn por show e o fadeOut  por hide e descubra novas transições usando sua criatividade.

// Comente!

comentários