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.
Muito bom, fica bonito o efeito, vou usar no meu novo site.
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!
Muito bom otimo esse efeito
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
Jefferson, você pode setar uma classe para os links que deseja aplicar os efeitos e alterar o código jQuery com a classe.
Bom, o efeito é bem interessante e muito bom, porém antes da transição ele pisca com a cor branca, como corrigir isso???
a cor do fundo você altera no CSS, colocando
html{
background-color: *codigo-da-cor*
}
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
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
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/
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).
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
Na verdade esse é um link direto para o 4 shared. Se quiser tentar novamente: http://www.4shared.com/zip/-FoNAYKu/efeito_troca_pagina.html
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/#
Muito bom parabens
att
http://www.prospectool.com