Crear un fondo animado con jQuery

domingo, noviembre 15, 2009
COMPARTE EL POST

image

CatsWhoCode nos presenta una interesante forma de diseño. Se trata de mostrar una imágen de fondo (o background image) en movimiento horizontal continuo gracias a jQuery.

Puedes ver el resultado final aquí.  El código probado y comprobado 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>

¡Síguenos en Twitter!


Deja tu comentario