Simple Vertical Parallax Example w/ background opacity

Simple Vertical Parallax Example w/ background opacity See http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity

by 8ogdan

HTML

<div id="a">A</div>
<div id="b" data-speed="5" class="parallax">B</div>
<div id="c">C</div>
<div id="d" data-speed="3" class="parallax">D</div>
<div id="e">E</div>

CSS

html, body {
    height:100%;
    margin:0;
}
#a, #c, #e {
    height:100%;
    background: #999;
}
#b, #d {
    height:300px;
    background-position: 50% 0;
    font: bold 60px Arial;
    text-align:center;
    color:white;
}
#b {
    background-image: url('http://www.textureking.com/content/img/stock/big/DSC_4436.JPG');
}
#d {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0.4))), url(http://www.textureking.com/content/img/stock/big/DSC_3512.JPG) repeat 0 0;
}

JavaScript

// The larger the data-speed attribute, the slower the parallax effect
// 3-5 is good. .1 is nuts
$('.parallax').each(function () {
    var elem = $(this);
    $(window).scroll(function () {
        var yPos = -($(window).scrollTop() / elem.data('speed'));
        elem.css({
            backgroundPosition: '50% ' + yPos + 'px'
        });
    });
})