Busca

Carregando...

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!

Posts relacionados