Usando CSS para criar efeito fade-in no carregamento da página

Uma maneira simples e rápida de inserir o efeito fade-in no carregamento de páginas é criar animações com CSS3. Elas ainda não são suportadas por todos os navegadores, mas as versões mais recentes de Firefox, Chrome e Safari conseguem exibi-las sem problemas.

Cole o código abaixo no arquivos CSS do seu site (no WordPress, geralmente tem o nome styles.css, dentro do diretório principal do tema instalado). Ele criará uma animação de 2 segundos onde a página sairá de 30% para 100% da opacidade, durante o carregamento.

body {
animation: fadein 2s; /* Padrão */
-webkit-animation: fadein 2s; /* Webkit */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* IE */
}

@keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Padrão */
}
@-moz-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Firefox */
}
@-webkit-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Webkit */
}
@-ms-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* IE */
}​

Veja aqui um exemplo. Basta clicar em “Run”, na parte superior da página, para ver funcionando.

Vale lembrar que animações em páginas, mesmo suportadas pelo navegador, podem exigir bastante do processamento gráfico e deixar o carregamento lento ou “picotado”. Tente usá-las com bom senso.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *