CSS: Create a Scrolling Background Tut

August 20, 2013 5:05 pm Published by Leave your thoughts

Today we will go over some css animation and transformation. Very basic stuff to begin with and we will build on it as we progress, build skill and confidence.

Before we begin take a look at the demo. P.S. This doesn’t work on IE, and if you’re using IE please do your self a favor and upgrade to Firefox or Chrome.
View Scrolling Background Demo

  1. First we need an HTML5 document.
            <!DOCTYPE html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <title>Scrolling</title>
                    <style type="text/css">
    
                    </style>
                </head>
                <body>
    
                </body>
            </html>
  2. Then we’ll need a div to contain everything else, and two more divs to contain the image that will be transformed and animated (move left to right).
    These will go inside the body tag.

            <div class="container">
                <div class="clouds1"></div>
                <div class="clouds2"></div>
            </div>
  3. Set up body, html & container div to cover the entire width of the screen by adding styles between the style tags on the head section of the page
            body, html{width:100%; margin:0; padding:0; background-color:#fff;}
            .container{
                width:100%;
                height:600px;
                overflow:hidden; 
                position:relative;
    
                /* generated from http://www.colorzilla.com/gradient-editor/ */         
                background: #1e5799; /* Old browsers */
                background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 53%, #ffffff 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(53%,#7db9e8), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 53%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 53%,#ffffff 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 53%,#ffffff 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 53%,#ffffff 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
            }

    We’ve set .container to overflow:hidden so we don’t get scrollbars when the background starts scrolling.

    Also, .container is position:relative so we can position the clouds absolute to the top of the page.

  4. Create a cloud image or get it from here. We will be attaching this cloud to our cloud div.
            .clouds1{
                background:url(clouds.png) no-repeat;
                position:absolute;
                top:0;
                left: -100%;
                z-index:100;
                width:1172px;
                height:400px;
                overflow:visible;
            }

    We’ve added the cloud as a background to the div, and set it to no-repeat.

    position is absolute and top = 0 so it stays at the top of the page no matter what the screen resolution is.

    left = -100% so the div starts off the screen, in other words, you can’t see it.

    z-index is 100 so it’s on top of the other elements on the screen. z-index sets the stack order of elements.

    Width and height needs to match your background image, in this case 1172px and 400px, that way we always have enough room to show the entire background.

    overflow is set to visible so if the screen is smaller than 1172px you can still see the full image.

  5. Now for the fun part…this goes inside the .clouds1 styles, so add this to the styles set on step 4.here we are simply declaring how our animation should behave.
            animation-name:cloudMove1;
            animation-duration:10s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;
            animation-direction:normal;
            animation-play-state:running;
    
            /* Safari and Chrome: */
            -webkit-animation-name:cloudMove1;
            -webkit-animation-duration:10s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:normal;
            -webkit-animation-play-state:running;

    animation-name:cloudMove1; – this gives your animation a name, you can change this to anything you want.

    animation-duration:10s; – this is how long your animation will run in seconds. Notice the “s” after 10? It stands for seconds.

    animation-timing-function:linear; – this is your easing. other options are cubic-bezier, easeIn, easeOut…

    animation-delay:0s; – how many seconds before your animation starts.

    animation-iteration-count:infinite; – the number of loops your animation will run.

    animation-direction:normal; – direction your animation will run, either normal or alternate.

    animation-play-state:running; – can be set to either running or paused.

    You’ll notice that there are also styles that start with -webkit- , these are for chrome and safari to work.

  6. Making the clouds actually move.
                @keyframes cloudMove1 {
                0% { left: -100%; }
                100% { left: 100%; }
                }
    
                @-webkit-keyframes cloudMove1 {
                0% { left: -100%; }
                100% { left: 100%; }
                }

    @keyframes cloudMove1 – notice the animation name we set earlier, this is where it’s used.
    0% { left: -100%; } – here we’re saying that at the beginning of the animation start it at the left at -100% (which is -1172px)

    100% { left: 100%; } – in 10 seconds move this to the left by 100%, 10 seconds because that’s what we declared earlier in step 5 on the duration.

  7. for .clouds2 simply copy everything from .clouds1 and add the styles below to flip the background horizontally
            	-moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
            
Tags: , , , , , , , ,

Categorised in: ,

This post was written by admin

Leave a Reply

Your email address will not be published. Required fields are marked *