¿Animación HTML5 en header?

Shikari · #1 (**permalink**) 01/11/2012, 12:53

Hola comunidad, cree una animación en .swf, posteriormente la convertí en HTML5 y la pude añadir a mi foro por medio de este código:

Código HTML:

<table width="1143" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><iframe src="http://pkdream.com/foros/images/fondos/Cabecera.html" width="1143" height="200" frameborder="0"></iframe></td>
  </tr>
</table>

Usando un iframe, pero lo que realmente quiero es que esa animación quede de fondo para añadir el logo encima de la animación y también para añadir unos botones de redes sociales, algo cómo ésto:

Las letras moradas son el logo, los dibujos de los Pokémon son el fondo y las Redes Sociales a un lado, con este código hice eso:

Código HTML:

<table border="0" width="1143" height="200" background="http://pkdream.com/foros/images/suen/cabecera.png" align="center"
STYLE="background-repeat:no-repeat; 
box-shadow: 0px 0px 20px #000000; 
border-radius: 10px;">
	<tr>
		<td class="logowrap" width="795" align="right"><a href="http://pkdream.com/foros"><img src="http://pkdream.com/foros/images/suen/logo.png" width="425" height="190" border="0"></a></td>
		<td align="right" valign="bottom">
			<a href="http://www.facebook.com/comunidadpkdream" class="navc" target="_blank"><img src="http://pkdream.com/images/facebook.png" border=0 title="Facebook PkDream" hspace="4" style="box-shadow: 0px 0px 5px #000000; border-radius: 5px;"></a>
			<a href="http://twitter.com/pkdream" class="navc" target="_blank"><img src="http://pkdream.com/images/twitter.png" border=0 title="Twitter PkDream" style="box-shadow: 0px 0px 5px #000000; border-radius: 5px;"></a>
			<a href="http://youtube.com/pkdreamforos" class="navc" target="_blank"><img src="http://pkdream.com/images/youtube.png" border=0 title="Canal PkDream" hspace="4" style="box-shadow: 0px 0px 5px #000000; border-radius: 5px;"></a></td>
	</tr>
</table>

Espero y alguien me pueda ayudar, saludos.

juanito1712 · #2 (**permalink**) 01/11/2012, 15:45

puedes tratar de ubicaar el iframe con posiciones absolutas y luego el logo y los botones también, jugando con el z-index supongo que podras hacer eso

memoadian · #3 (**permalink**) 01/11/2012, 16:08

lo unico que debes hacer es poner el swiffy object

crear un div en tu web por ejemplo usar header sirve

Código HTML:

Ver original<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy output</title>
    <script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>
 
    <script>
      swiffyobject = {"tags":aqui todo el code;
    </script>
    <style>html, body {width: 100%; height: 100%}</style>
  </head>
  <body style="margin: 0; overflow: hidden">
  <header id="banner"></header>
    <script>
      var stage = new swiffy.Stage(document.getElementById('banner'),
                                   swiffyobject);
      
      stage.start();
    </script>
  </body>
</html>

Ya lo de poner encima algo no se si se pueda nunca lo he intentado.

#4 (**permalink**) 01/11/2012, 17:01

Desde alguna experiencia en mi vida anterior (XHTML 1.0 Transitional), es importante posicionar los elementos en forma consecutiva, como si se tratase de capas. Primero el fondo, ... de forma secuencial

Es importante (imprescindible) trabajar, como te dice juanito1712 las posiciones absolutas. El z-index ayuda mucho, cuando algo falla. y cuida que el CSS no sea sobreescrito posteriormente (con otro CSS o dentro del código HTML).

P.D.: Yo trabajaba con div id posicionados con CSS evitando las tablas.

juanito1712 · #5 (**permalink**) 01/11/2012, 19:21

ojo que eso de las posiciones absolutas es muy relativo, las posiciones absolutas son ideales cuando tienes un contenido estático y muy delimitado que en este caso tiene toda esa pinta y los z-index solo son útiles con contenidos estáticos

Lo que si que tiene también toda la pinta es que se esté maquetando con tablas, hace 10 años era pan de cada día pero hoy en día casi es mejor caer en div panic que en maquetacion por tablas.

Si no me equivoco y estás maquetando con tablas; Te va a cambiar un poco el concepto de maquetacion que tienes y te va a parecer odioso pero cambia ese mal hábito, cuando controles un poco los divs veras que son los que mandan, busca unos cuantos tutoriales de "html y css" y haz unos tantos layouts todo lo descabellados que te permita tu conocimiento de manejo de divs.

Shikari · #6 (**permalink**) 01/11/2012, 23:24

Gracias a todos por sus respuestas.

Esta no es la maquetación de mi web, es la simple cabecera de un foro vBulletin que estoy diseñando.

Anteriormente quería hacer la animación con puro CSS (Tal y como lo vi en un foro) pero de verdad no entendí mucho como hacerlo, hice todo el CSS sin la animación, pero no pude hacer que se movieran los objetos como quería, por eso acudí a usar una animación HTML5.

@txemaarbulo, probaré hacer todo que divs como me dices. Espero tener buenos resultados.

Gracias juanito1712 y memoadian por la ayuda.

Saludos.

xbal19 · #7 (**permalink**) 04/11/2012, 21:09

muy interesante el articulo