Basic scrolling parallax text

HTML

<header class="header">
    <div class="wrapper">
        <h1>Basic scrolling parallax text</h1>
    </div>
</header>
<section class="module module-1">
    <div class="wrapper">
        <h1>Module 1</h1>
    </div>
</section>
<section class="module module-2">
    <div class="wrapper">
        <h1>Module 2</h1>
    </div>
</section>
<section class="module module-3">
    <div class="wrapper">
        <h1>Module 3</h1>
    </div>
</section>
<section class="module module-4">
    <div class="wrapper">
        <h1>Module 4</h1>
    </div>
</section>
<section class="module module-5">
    <div class="wrapper">
        <h1>Module 5</h1>
    </div>
</section>
<footer class="footer">
    <div class="wrapper">
        <p>By <a href="http://twitter.com/laustdeleuran">@laustdeleuran</a></p>
    </div>
</footer>

CSS

body {
    font-family:Helvetica, Arial, sans-serif;
    background:#333;
}
.header, .module, .footer {
    position:relative;
    height:250px;
}
.wrapper {
    width:80%;
    max-width:1200px;
    padding:20px;
    margin:0 auto;
}
.header, .footer {
    background:#222;
    color:#fff;
    border-bottom:5px solid #111;
}
.footer {
    border-bottom:none;
    border-top:5px solid #111;
}
.header a, .footer a {
    color:cyan;
}
.module {
    height:250px;
    background:url(http://lorempixel.com/1000/1000/abstract/1/) 50% -500px no-repeat;
    font-size:36px;
    color:#fff;
    text-shadow:0 -1px rgba(0,0,0,0.5);
    border-bottom:5px solid #222;
    margin:0 auto;
    max-width:1600px;
        /*-o-transition:background-position 0.1s ease-out;
        -ms-transition:background-position 0.1s ease-out;
        -moz-transition:background-position 0.1s ease-out;
        -webkit-transition:background-position 0.1s ease-out;
    transition:background-position 0.1s ease-out;*/
}
.module:last-of-type {
    border-bottom:none;
}
.module-2 {
    background-image:url(http://lorempixel.com/1600/1000/abstract/2/);
}
.module-3 {
    background-image:url(http://lorempixel.com/1600/1000/abstract/3/);
}
.module-4 {
    background-image:url(http://lorempixel.com/1600/1000/abstract/4/);
}
.module-5 {
    background-image:url(http://lorempixel.com/1600/1000/abstract/5/);
}

JavaScript

$(document).ready(function(){
    var $win = $(window),
    $modules = $('.module'),
    vpHeight = $win.height(),
    bgHeight = 1000;
    $win.on('scroll', function() {
        var top = $win.scrollTop();
        $modules.each(function() {
            var $module = $(this), pos;
            pos =   - 200 + ( top - $module.offset().top ) ;
            $module.css({backgroundPositionY: pos + 'px'});
        });
    }).trigger('scroll');
    $win.on('resize', function() {
        vpHeight = $win.height();
    });
    $('.header').css({'opacity':( 100-$(window).scrollTop() )/100});
});