Basic scrolling parallax text

HTML

<header class="header">
    <div class="mwrapper">
        <h1>Basic scrolling parallax text</h1>
    </div>
</header>
<!--<section class="module module-1">
    <div class="mwrapper">
        <h1>Module 1</h1>
    </div>
</section>-->
<section class="module module-2">
    <div class="mwrapper">
        <div class='marquee'>
    <div class='marquee-text'>
    <div class="cell" id = "1">
    
        </div>
        
        <div class="cell" id = "2">
        <h3>2</h3>
        </div>
    </div>
</div>
    </div>
</section>
<footer class="footer">
    <div class="mwrapper">
        <p>By <a href="http://twitter.com/laustdeleuran">@laustdeleuran</a></p>
    </div>
</footer>

CSS

.mwrapper {
    width:80%;
    max-width:1200px;
    padding:20px;
    margin:0 auto;
}
.module {
    height:200px;
    position:relative;
    background:url(http://i.imgur.com/NXuzheR.jpg) 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/);
}

.marquee {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}


@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -50% } // depending on text length...
}

.cell{
  width: 120px;
  height: 120px;
  margin: 1%;
  padding: 1.5%;
  background-color:#e8e8e8;
  display:inline-block;
  position:relative;
  overflow:hidden;
}


.cell{
  background-image:url(http://i.imgur.com/lWRz8ou.jpg);
}
.cell #2{
  background-image:url(http://i.imgur.com/lWRz8ou.jpg);
}

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});
});