Nível: intermediário
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:
<body>
Substitua por:
</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!
Fiz lá no meu blog. Gostei muito do efeito!
ResponderExcluirValeu pela dica!
Marco Damaceno
@Marco Damaceno, obrigada. Ficou bom no seu blog porque não tem tanta tralha como o meu. Continue assim. ;)
ResponderExcluirEu achei que o blog do Marco Damaceno ficou muito demorado pra carregara primeira vez. Muito tempo no brancão!!
ResponderExcluirOlá, 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@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.
ResponderExcluirObrigada e volte sempre!
O efeito fad-in funciona muito bem no blogger.
ResponderExcluirNo 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
Interessante esse Recurso.
ResponderExcluirPoré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.
Com esse script de fade a página tem que ser 100% carregada primeiro antes de aparecer qualquer coisa.
ResponderExcluirSe 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!
Funcionou super bem no Firefoz, mas no Chrome, nenhum link funcionava... Estranho.
ResponderExcluirMuito bom parabéns,
ResponderExcluirgosto daqui para ver as coisas do Blogger como também o fórum do ajuda.foruns.com.pt !
É muito bom os dois,
parabéns
Como faço pra colocar uma imagem no lugar do fundo branco?
ResponderExcluirfadeInPage.bg='#fff';
Não sei como fazer a modificação, pois se eu tirar a cor, o código não aparece. OBRIGADO
Muito bom esse efeito, e já verifiquei que funciona.
ResponderExcluirMuito bom valeu
ResponderExcluirabraços
franco
www.desafiopolishop.com
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?
ResponderExcluirThe 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. ;)
ExcluirO que eu tinha pensado não funcionou para a página inteira. Sinto muito. :(
Excluir