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.
