Clouds Animation

User Rating: / 0
PoorBest 

Hi, in this tutorial i will present you a new background animation.It is a Slide Clouds Animation Effect.

Create a new html page and in the head section copy the code for background animation:

        <style type="text/css" media="screen">
            body{
                background-color: #C0DEED;
                margin:0;
                padding:0;
            }
           
            #header{
                height:180px;
                background: #8EC1DA url(bg-clouds.png) repeat-x top left;
                text-align:center;
                margin-top:-30px;
                width:100%;
            }
           
           
            #content{
                background-color:#fff;
                height:500px;
                width:980px;
                margin:25px auto 0 auto;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
            }
        </style>
   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
            var scrollSpeed = 1;         // Speed in milliseconds
            var step = 1;                 // How many pixels to move per step
            var current = 0;            // The current pixel row
            var imageWidth = 2247;        // Background image width
            var headerWidth = 1280;        // How wide the header is.
           
            //The pixel row where to start a new loop
            var restartPosition = -(imageWidth - headerWidth);
           
            function scrollBg(){
                //Go to next pixel row.
                current -= step;
               
                //If at the end of the image, then go to the top.
                if (current == restartPosition){
                    current = 0;
                }
               
                //Set the CSS of the header.
                $('#header').css("background-position",current+"px 0");
            }
           
            //Calls the scrolling function repeatedly
            var init = setInterval("scrollBg()", scrollSpeed);
            var restartPosition = -(imageWidth);
</script>

In the body section insert the code:

<div id="container">
            <div id="header">
                   
            </div><!-- #header -->

            <div id="content">
                <!-- Your content will go here -->
           </div><!-- #content -->
</div><!-- #container -->

Enjoy... the silence! ;)

This script has been developed by http://www.catswhocode.com !