Aplicar una imagen de fondo animada a una página podría resultar algo molesto, siempre y cuando, la imagen de por sí lo sea, pero existen páginas webs que incorporan este efecto, el cual da la sensación de haber sido realizado en flash cuando en realidad no es mas que simple código y algo de CSS incorporado al mismo.
El resultado final, puede sorprender a cualquiera.
Para conseguir dicho efecto podemos distribuir el código de la siguiente forma, sin olvidarnos que debemos incluir la librería JQuery (ya incluida en el código).
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
Fondo animado
Imagen de fondo animada
Las variables que nos interesa manejar dentro del código son las siguientes:
- scrollSpeed: determina la velocidad de la animación.
- step: el numero de saltos, un mayor número a 2 podría destruir el efecto de la animación.
- current: la posición desde donde debe comenzar dicha animación
- imagewidth: el ancho de la imagen.
- headerwidth: el ancho de la cabecera.
Si quieres puedes ver el resultado en Codingkitty.
