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

  • Danilo 27 de setembro de 2011

    muito legal!

  • Alex William 30 de setembro de 2011

    Gostei!

  • Fabio 9 de novembro de 2011

    Não funcionou aqui comigo :(

  • Pinguim 1 de dezembro de 2011

    Brother, eu não consegui fazer o fadeIn do conteiner, este efeito que vc colocou no momento que abre essa página http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/

    eu olhei o código dela e tem algumas coisas que não entendi por exemplo uns js como esse window.addEvent(‘load’,function(){ loadResult(); });

    vc poderia deixar o codigo de uma pagina completa chamando ela mesma com os dois efeitos, fadein e fadeout?

    ps: o efeito fadeout funcionou legal

    • Ruan Carlos 1 de dezembro de 2011

      Olá cara, essas coisas são do próprio jsfiddle, nele não se deve ver o código fonte, apenas o código de suas abas (js /css /html).

      O esquema do fadeIn esta explicado aqui no texto, mas segue um link só com ele.

      http://jsfiddle.net/Ns97H/8/

      • Pinguim 1 de dezembro de 2011

        vlw ruan, parabens pelo post brother xDDDD

  • Pinguim 1 de dezembro de 2011

    (RESOLVIDO)
    broootherrr
    descobri o erro, pro efeito do fadeIn funcionar a div container tem que estar hidden ()
    éra isso, agora funfou massa

  • saulo caravalho 19 de junho de 2012

    muinto bom!

  • Felipe Campos 26 de março de 2013

    Olá pessoal…

    Gostaria de saber se tem como fazer outros efeitos sem ser o fadein/fadeout…

    Pesquisei e no jQuery pra mobile ele tem a opção de usar a propriedade “data-transition” dos links “” e setar o efeito… como neste exemplo (http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html)…

    Como eu faço isso sem ser em mobile ?

    Obrigado.

  • Igor Silvano 13 de junho de 2013

    Olá, eu não sei nada de linguagem JavaScript, e gostaria de saber onde colo esse código em Java, se na mesma página HTML ou tenho que criar uma página JavaScript? desde já agradeço!

  • cleberson Schmidt 5 de julho de 2013

    nao funciona comigo,devo substituir o link indicado por index,html e index2.html no caso certo? obrigado :(

Deixe seu Comentário