xeroso • 24.04.13 20:10
Efeito de transição com jQuery (by $r0xx.sh) 24.04.13 20:10
Galera, hoje irei ensinar á vocês a como criar um efeito de transição de página via jQuery com os efeito fadeIn e fadeOut
O primeiro passo é adicionar o estilo para ocultar o seu body. Você poderá fazer isso no CSS:
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:
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:
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.
O ideal é que a cor definida seja o mais parecida possível com oseu 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 fdeOut por hide e descubra novas transições usando sua criatividade.
by $r0xx.sh
O primeiro passo é adicionar o estilo para ocultar o seu body. Você poderá fazer isso no CSS:
- Código:
body{ display:none;}
- Código:
$(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:
- Código:
$(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:
- Código:
$(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.
- Código:
html {
background-color: #000000;
}
O ideal é que a cor definida seja o mais parecida possível com oseu 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 fdeOut por hide e descubra novas transições usando sua criatividade.
by $r0xx.sh
