Parallax Scrolling Background

1/3 Scrolling of background compared to foreground. Using CSS3 gradients for compositing background

by rodneyrehm

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<script src="https://raw.github.com/NobleJS/setImmediate/master/setImmediate.js"></script>
<div id="background"></div>


<!-- start slipsum code -->

<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>

<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>

<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and...

CSS

/* using Prefix free for simple demo CSS */
html, body {
    color: #FFF;
}

p {
    background: rgba(255,255,255,0.2);
    font-size: 1.2em;
    margin: 2em;
    padding: 1em;
}
p + p {
    margin-top: 0;
}

#background {
    position: fixed;
    top: 0; 
    right: 0;
    bottom: 0;
    left: 0;
    
    z-index: -1;
    
    transition: top linear 0.1s;
    
    background:
        linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
        linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
        linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
        linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
        linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
}

JavaScript

var $document = $(document),
    $background = $('#background'),
    moveBackground = function() {
        var so = $document.scrollTop();
        $background.css('top', (-so/3) + "px");
    };

$(window).on('scroll', function(e) {
    // detach from scroll event handler
    // event handlers should exit as quickly as possible
    setImmediate(moveBackground);
});

/*
    using setImmediate() from:
        https://github.com/NobleJS/setImmediate

    using prefix free for simplicity:
        http://leaverou.github.com/prefixfree/

    using the carbon pattern from
        http://lea.verou.me/css3patterns/#carbon

    using some blind text:
        http://slipsum.com/

    see http://jsfiddle.net/rodneyrehm/xS6Gp/ for performance
    benefits when using a background-image
*/