Imágen de fondo animada con jQuery

Publicado el 12⋅Noviembre⋅2009 en JavaScript, Desarrollo Web
0 Comentarios • RSS • 845 hits

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>