I'm currently working on a new design for one of my sites. The main aim is to make it more readable, and eventually fully responsive and mobile friendly, but for now I've been messing around with different bits and pieces. As it's video game oriented and the current site has a pixelly background, I've been playing around with parallax scrolling. At the moment I think it might be a little distracting (especially with the moving clouds), but it was fun to create.

The actual scrolling code isn't particularly complex. I originally started with the code from here: jonraasch.com/blog/… but it was a little more functionality than I wanted. In the end I used a fixed div for each layer of the background. These divs are then moved as the page scrolls, based on their original offset and their scroll speed. The original method was to set the background-offset instead of top, but it meant the divs had to be dynamically sized and I wasn't really happy with how it worked.

$(document).ready(function() {
    
    $('div[data-type="background"]').each(function(){
        var $bgobj = $(this);
        
        $(window).scroll(function() {
            var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
            var coords = ($bgobj.data("origin") + yPos) + 'px';
            $bgobj.css({ top: coords });
        });
    });
    
});

View Raw Code →


The clouds are just animated with CSS3. The code for them is a bit rough, so they tend to disappear on larger windows and they also get a bit bunched up.

/* ----------------------------------------------------------------------
 * -- Background Elements
 * ---------------------------------------------------------------------- */

.fast_cloud {
    -webkit-animation: moveclouds 60s linear infinite;
    -moz-animation: moveclouds 60s linear infinite;
}

.slow_cloud {
    -webkit-animation: moveclouds 120s linear infinite;
    -moz-animation: moveclouds 120s linear infinite;
}


/* ----------------------------------------------------------------------
 * -- Cloud Animations
 * ---------------------------------------------------------------------- */

@-webkit-keyframes moveclouds {
    0% {margin-left: 1500px;}
    100% {margin-left: -220px;}
}
@-moz-keyframes moveclouds {
    0% {margin-left: 1500px;}
    100% {margin-left: -220px;}
}
@-o-keyframes moveclouds {
    0% {margin-left: 1500px;}
    100% {margin-left: -220px;}
}

View Raw Code →


You can play around with the demo here, and feel free to use the scrappy code in whatever you want.

For comparison, here's the original post with a non-scrolly background.