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.