Utilizando jQuery em transições de páginas

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

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

15 Comentários

  • Responder março 7, 2012

    Heverton Castro

    Muito bom, fica bonito o efeito, vou usar no meu novo site.

  • Responder março 18, 2012

    Olinda Costa

    Olá
    Visitei o seu site e achei-o sensacional!
    Gostaria de conversar com você sobre propostas de publicidade.
    Em caso de interesse me envie em email.
    Obrigada!

  • Responder julho 3, 2012

    Paulo

    Muito bom otimo esse efeito

  • Responder julho 26, 2012

    Jefferson

    Parabéns pelo post…muito bom o efeito….
    Mas tenho uma dúvida como eu faço para que alguns links não assumam o efeitos…Obrigado

    • Responder julho 30, 2012

      eufacoprogramas

      Jefferson, você pode setar uma classe para os links que deseja aplicar os efeitos e alterar o código jQuery com a classe.

  • Responder novembro 9, 2012

    belmondo

    Bom, o efeito é bem interessante e muito bom, porém antes da transição ele pisca com a cor branca, como corrigir isso???

    • Responder novembro 10, 2012

      eufacoprogramas

      a cor do fundo você altera no CSS, colocando

      html{
      background-color: *codigo-da-cor*
      }

  • Responder novembro 12, 2012

    Alessandro Araújo

    Cara blz? Primeiramente parabéns pelo seu site, muito bom!

    Gostaria de saber como faço para o efeito se aplicar somente a DIV principal da minha página, de forma que ao clicar em um link o efeito aconteça somente na parte de conteúdo.

    Abraço

    • Responder maio 9, 2013

      Mauricio

      Cara este efeito do é feito em javascript mas da apra fazer ele em css3 com a propriedade tansition e o codigo do site e todo do wix

  • Responder fevereiro 19, 2013

    Fernando Ferreira

    Muito lega goste.
    aki so uma perguntinha.
    Como faço para ele fazer para a pagina vim da esquerda para direta.
    estilo este site.
    http://www.itsdesignintegrado.com/

    • Responder setembro 5, 2013

      Chinnon Santos

      Isso ai já é usando uma biblioteca de slide, organizada por UL, em casa LI você coloca o conteúdo de cada pagina, quando carregar o site exibe a primeira LI ( index ), assim quando a pessoa clicar no link de outra página você vai simular como se estivesse clicando em uma miniatura da imagem ( se fosse a galeria de fotos original… ) para mostrar o conteúdo especifico.

      Da para montar manual sem o uso de bibliotecas externas, mas você vai fazer muitos calculo, criar uma div, com overflow=none ( para mostrar somente a primeira ), jogar o UL dentro com posição absoluta, organizar todas as LI horizontalmente, a cada clique alterar as posição absoluta do UL para – o tamanho total das LI a esquerda (essa alteração será no CSS), e claro, usar os efeitos de transição do CSS para a página deslizar suavemente quando você alterar sua posição com javascript (jQuery).

  • Responder outubro 25, 2013

    Schuma

    Olá !

    Estou tentando baixar os arquivos no seu link “baixe os arquivos nesse link”, porém está baixando um .exe, que força a instalação de vários programas no meu computador.

    Há outra forma e baixar ?

    Grato !

    Sds
    Schuma

  • Responder abril 7, 2014

    Fred

    Parabéns, mas como posso trocar esse efeito por outro? Exemplo de site com outros efeitos:

    http://demos.jquerymobile.com/1.0a4.1/docs/pages/docs-transitions.html

    http://www.agenciai9.net/#

  • Responder abril 23, 2014

    Prospectool.com

    Muito bom parabens

    att
    http://www.prospectool.com

// Siga as boas práticas: Comente!