Scrolling Parallax

Demo with jQuery and Plugin by Jon Raasch

by erick

HTML

<div class="foreground"></div>
    <div class="plane"></div>
    <div class="cloud"></div>
    <div class="background"></div>
    <div class="sun"></div>
    <div class="scroller"></div>

CSS

.foreground { width: 32000px; position: absolute; background: url(http://www.freizeitler.de/examples/parallax/images/foreground.png) repeat-x 0 0; height: 50px; bottom: 0; left: 0; z-index: 5; }
        .plane { width: 180px; height: 148px; position: absolute; background: url(http://www.freizeitler.de/examples/parallax/images/plane.png) no-repeat 0 0; bottom: 0px; left: 0; z-index: 4; }
        .cloud { width: 155px; height: 85px; position: absolute; background: url(http://www.freizeitler.de/examples/parallax/images/cloud.png) no-repeat 0 0; bottom: 80px; left: -200px; z-index: 3; }
        .background { width: 16000px; height: 167px; position: absolute; background: url(http://www.freizeitler.de/examples/parallax/images/background.png) repeat-x 0 0; bottom: 40px; left: 0; z-index: 2; }
        .sun { width: 119px; height: 111px; position: abolute; background: url(http://www.freizeitler.de/examples/parallax/images/sun.png) no-repeat 0 100%; bottom: 100px; left: 600px; z-index: 1; }
        .scroller { width: 32000px; height: 1px; }

JavaScript

/**
 * jQuery Scrolling Parallax v0.1
 * http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
 *
 * Copyright (c) 2009 Jon Raasch (http://jonraasch.com/)
 * Licensed under the FreeBSD License (See terms below)
 */


( function( $ ) {
    
    $.scrollingParallax = function ( box, options )
    {
        var options = options || {};
        
        // vertical options
        
        options.enableVertical = typeof( options.enableVertical ) != 'undefined' ? options.enableVertical : true;
        
        if ( options.enableVertical ) {
            options.staticSpeed = options.staticSpeed || false;
            options.staticScrollLimit = typeof(options.staticScrollLimit) != 'undefined' ? options.staticScrollLimit : true;
            
            options.loopIt = options.loopIt || false;
            
            options.reverseDirection = options.reverseDirection || false;
        }
        
        // horizontal options
        
        options.enableHorizontal = options.enableHorizontal || false;
        
        if ( options.enableHorizontal ) {
            options.staticSpeedX = options.staticSpeedX || false;
            options.staticScrollLimitX = typeof(options.staticScrollLimitX) != 'undefined' ? options.staticScrollLimitX : true;
            
            options.loopItX = options.loopItX || false;
            
            options.reverseDirectionX = options.reverseDirectionX || false;
        }
        
        // IE6 options
        
        options.disableIE6 = options.disableIE6 || false; // disables in IE6 altogether
        options.disableIE6Anim = typeof(options.disableIE6Anim) != 'undefined' ? options.disableIE6Anim : true; // disables IE6 animation, however background will still append
        
        // layout options
        
        options.bgWidth = options.bgWidth || (options.enableHorizontal ? '150%' : '100%' );
        options.bgHeight = options.bgHeight || '150%';
        
        options.bgRepeat = options.bgRepeat || false;
     ...