JavaScript: getElementById + CSS + Flash


Utilizando-se desses três recursos, faremos um efeito bem legal – uma animação será exibida assim que carregar a página e ficará ativa por alguns segundos.

Aqui eu não vou ensinar como criar a animação em flash, fique a vontade para criar a sua animação.

Vamos utilizar:
– animação Flash
– código JavaScript
– css inline

Acompanhe o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<script type="text/javascript" > 
function fechaAnimacao() {
    var vFlash = document.getElementById('divFlash');
    vFlash.style.visibility = 'hidden';
}
</script>
</head>
<body>
    <div id="divFlash" style="position:absolute; z-index:10000; left:280px; top:300px">
        <arquivo flash>
    </div>
    <script>setInterval(fechaAnimacao, 8000);</script> 
</body>

Explicando:

– função fechaAnimacao(): função bem simples; é passado para a variável vFlash o id do elemento div definido com o nome de divFlash.

– Esta variável utiliza um manipulador css para ocultar a animação.
Em um post anterior eu disponibilizei uma tabela com as propriedades do css permitidas no JavaScript.
Acesse aqui.

– dentro da tag body temos um div que contém a animação Flash e logo após, um script que ao ser chamado espera 8 segundos para executar a função fechaAnimacao(). O div utiliza css inline para ajustar a posição. Você pode mudar os valores de left e top para definir uma nova posição. O z-index é utilizado para que a exibição da animação ocorra acima dos demais elementos div.

Deixe uma resposta

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