CatsWhoCode nos presenta una interesante forma de diseño. Se trata de mostrar una imágen de fondo (ó background image) en movimiento horizontal continuo gracias a jQuery.
Puedes ver el resultado final aquí. El código probado y comproado se muestra a continuación:
<!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>Animated Background Image</h1>
</div><!-- #header -->
<div id="content">
<!-- Your content will go here -->
</div><!-- #content -->
</div><!-- #container -->
</body>
</html>