Анимированный бэкграунд

09.08.2015

1 Создаем index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Animated background Image</title>
    </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>

2 Добавим стили

<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>

3 Подключим jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

4 Собственно сам скрипт, который выполняет всю работу

<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>

Демо

#JQuery‏‎