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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo animado</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
body{
background-color: #C0DEED;
margin:0;
padding:0;
}
#header{
height:180px;
background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
text-align:center;
margin-top:-30px;
}
#header h1{
padding-top:35px;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
color:white;
font-size:45px;
}
#content{
background-color:#fff;
height:500px;
width:980px;
margin:25px auto 0 auto;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247; var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){ current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0"); }
var init = setInterval("scrollBg()", scrollSpeed);
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Imagen de fondo animada</h1>
</div><!—#Cabecera de la página—>
<div id="content">
<!—Contenido de la página -->
</div>
</div>
</body>
</html>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.
