Scroll Magic Parallax

scrollin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/plugins/debug.addIndicators.js"></script>
<div id="project_container">
    <div id="project_content">
        <img src="http://scrollmagic.io/img/example_parallax_bg2.png" class="masthead" alt="">
    </div>
</div>

CSS

#project_container {
    position:relative;
    margin:0 auto;
    height:900px;
    width:100%;
    z-index:10;
    text-align: center;
    background-color:#00abc1
}
#project_content {
    position:relative;
    display: inline-block;
    width:400px;
    z-index:3;
    border:0;
    overflow: hidden
}
.masthead {
    height:auto;
    width:100%;
    transform: scale(0.5, 0.5);
}

JavaScript

jQuery(function ($) {
    var controller = new ScrollMagic.Controller();
    var tween = TweenMax.staggerFromTo(".masthead", 2, {
        transform: "translate(0px,0px) scale(1.1)"
    }, {
        transform: "translate(0px,500px) scale(1.1)"
    });
    var scene = new ScrollMagic.Scene({
        duration: 800
    })
    scene.setTween(tween);
    scene.addTo(controller);
    scene.addIndicators();
});