26/09/2011

jQuery Transitions | Como fazer transições de páginas

Olá, a algum tempo que eu não posto aqui, estou mais focado na tradução da documentação, mas para vocês não me esquecerem, vim dar um oi ;) .

Recentemente comecei um job onde o cliente solicitou que o site tivesse algumas animações, não fosse paradão. Pensei comigo mesmo, acho que o cara quer uma apresentação no PowerPoint =).

Em busca dessa solução, pensei em fazer transições entre as páginas. Eis que veio na minha cabeça um efeito muito simples mas de impacto, simplesmente esmaecer a página.

Vamos ao código então. Precisamos ter nosso html bonitinho.

A marcação

HTML – Página 1

<div id="container">
    <h1>Essa é a index </h1>
    Aqui vamos ter um texto qualquer onde temos um <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>. Esse link vai fazer a página esmaecer
</div>

HTML – Página 2

<div id="container">
    <h1>Essa é a segunda página </h1>
    Ela vai aparecer e vai ter um <a class="transition" href="http://jsfiddle.net/ruanltbg/WvD7Q/1/embedded/result/">link</a> para a index.
</div>

Já temos o HTMl com os links para as páginas, decidi deixar os links com uma class transition para poder identificar quais os links irão ter o efeito (pois posso ter links internos que simplesmente não irão a lugar nenhum, como âncoras).

Efeitos

Para ficar com o efeito armênico, precisamos que quando a página for abrir ela apareça devagar, ou seja, vamos usar o método fadeIn() para fazer isso. E após, precisamos pegar todos os links, aplicar o efeito na página e então redirecionar para onde o site deveria ir.

JavaScript

Vale lembrar que tudo deve estar dentro do ready e o código é igual para ambas as páginas.

$("#container").fadeIn(2000);
$("a.transition").click(function(event){
    event.preventDefault();
    link = this.href;
    $("body").fadeOut(1000, function(){
        window.location = link;
    });        
});

Simples assim, agora temos uma página que mais parece um PowerPoint =D.

Demo

*ignore o header do jsfiddle que aparece

, ,

Comentários

Deixe seu Comentário