quinta-feira, 10 de setembro de 2009

Efeito "Fade In" na abertura do Blogger

Nível: intermediário
Blogger

Eu já uso esse script há algum tempo em alguns sites, mas devo dizer que só consegui fazê-lo funcionar no Blogger. Em outros sites o efeito até acontece, mas ao contrário: ao invés de mostrar a página, a esconde: fade out.

Uma vez eu partilhei aqui a metatag que gera efeitos de transição de páginas no Internet Explorer. Já com esse script é exatamente o contrário. Por padrão ele funciona bem em todos os navegadores, exceto Internet Explorer.

Atualmente esse efeito pode ser visto em funcionamento na seguinte página:

Observe que enquanto o site não é 100% baixado a página fica em branco. Isso tem seu lado positivo: o visitante não vai ver o site antes que tudo esteja no seu devido lugar. Mas a tela branca por muito tempo pode levar o leitor impaciente a desistir e fechar antes de terminar de abrir.

Antes de adotar definitivamente esse script, talvez seja bom pedir aos seus leitores para partilharem suas impressões.

1. Baixe o script

O arquivo .js pode ser baixado de qualquer um dos seguintes links:

2. Suba o arquivo

Você deverá subir o arquivo para sua própria hospedagem e copiar o link do mesmo.

3. Insira o script no blog

Vá até Layout » Editar HTML e procure pela parte do código que separa o cabeçalho do corpo do site:

</head>
<body>

Substitua por:

<script language='JavaScript' src='http://www.htmhelen.kit.net/fade.js' type='text/javascript'></script>
</head>
<body>

<div id='fadeDiv'></div>

Onde está escrito www.htmhelen.kit.net/fade.js coloque a URL exata do seu arquivo .js hospedado. Visualize antes de salvar.

Até mais!

Pix meutedio arroba mail ponto com

16 comentários:

  1. Fiz lá no meu blog. Gostei muito do efeito!
    Valeu pela dica!

    Marco Damaceno

    ResponderExcluir
  2. @Marco Damaceno, obrigada. Ficou bom no seu blog porque não tem tanta tralha como o meu. Continue assim. ;)

    ResponderExcluir
  3. Eu achei que o blog do Marco Damaceno ficou muito demorado pra carregara primeira vez. Muito tempo no brancão!!

    ResponderExcluir
  4. Olá, este script funciona muito bem no blogspot, no entanto, em um site esse efeito funciona ao contrário 'Fade Out'. Gostaria, se possível, do script 'Fade In' pra um site. Obrigado.

    ResponderExcluir
  5. @Amaury, os foco do HTMHelen são usuários de blogs mesmo, mas sua sugestão foi anotada e pode se tornar um post um dia, mas como o número de sugestões listadas é muito alto, é bem provável que você encontre a solução antes disso em algum site com foco em JavaScript.

    Obrigada e volte sempre!

    ResponderExcluir
  6. O efeito fad-in funciona muito bem no blogger.

    No entanto, o Google dá cada vez mais importância ao tempo que leva a carregar uma página e isso influencia o nosso posicionamento no ranking.

    Se demorar muito a carregar a página, somos penalizados.

    Apesar de gostar de alguns efeitos visuais, como o que você mostrou neste post, uso cada vez menos esse tipo de efeitos ...

    Outro exemplo que faz com que demore a carregar a pagina é o "Friend Connect" do Google. Já o removi de alguns sites meus e vi a minha posição no ranking a subir.

    Bjs

    ResponderExcluir
  7. Interessante esse Recurso.

    Porém como o amigo dai de cima falou.

    Deixa a página um pouco demorada pra carregar.

    Seria interessante um loader.gif enquanto ela carrega.

    ResponderExcluir
  8. Com esse script de fade a página tem que ser 100% carregada primeiro antes de aparecer qualquer coisa.

    Se o blog tiver muitos penduricalhos (como é o caso do meu): anúncios em flash, Google Friend Connect, scripts de outros sites (como Twitter e BlogBlogs), esse tempo de tela branca vai ser muito alto, portanto não recomendo para sites assim.

    Ao mesmo tempo é um recurso muito interessante para blogs mais simples, que só têm texto e imagens, porque o tempo de tela branca vai ser muito curto e o efeito é bonito.

    Até mais!

    ResponderExcluir
  9. Funcionou super bem no Firefoz, mas no Chrome, nenhum link funcionava... Estranho.

    ResponderExcluir
  10. Muito bom parabéns,
    gosto daqui para ver as coisas do Blogger como também o fórum do ajuda.foruns.com.pt !
    É muito bom os dois,
    parabéns

    ResponderExcluir
  11. Como faço pra colocar uma imagem no lugar do fundo branco?

    fadeInPage.bg='#fff';

    Não sei como fazer a modificação, pois se eu tirar a cor, o código não aparece. OBRIGADO

    ResponderExcluir
  12. Muito bom esse efeito, e já verifiquei que funciona.

    ResponderExcluir
  13. Muito bom valeu

    abraços

    franco
    www.desafiopolishop.com

    ResponderExcluir
  14. Ficou lindo, mas nenhum link do blog funcionou depois que eu coloquei no blog. No Firefox funciona, mas no Chrome não. Você poderia me dar alguma solução para esse problema?

    ResponderExcluir
    Respostas
    1. The MisstakeD, faz um tempão que não olho esse recurso. Mas vou tentar desenvolver uma solução usando CSS 3. Se conseguir aviso aqui. ;)

      Excluir
    2. O que eu tinha pensado não funcionou para a página inteira. Sinto muito. :(

      Excluir

Todos os comentários são moderados pela autora do blog.