Parallax Header ve Görse Geçişleri

HTML
------
<div class="contain">
<header class="header">
    <div class="bg"></div>
    <div class="logo"></div>
    <div class="karga"></div>
</header>

<section>
    <h1>Ercüment Üzer Parallax</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae delectus, commodi ipsa sunt quas sit qui deserunt tenetur natus iste incidunt dolorem fuga magni rem rerum! Iure in aliquam tempora inventore atque quos nesciunt facere, quibusdam possimus, rerum deserunt, magni laborum. Expedita magni nemo ut perspiciatis quia reiciendis, inventore alias odio iure sed minus quod facilis, earum, ab consequatur modi placeat pariatur necessitatibus fugiat nam provident tempora quo beatae dolores? Dignissimos distinctio similique nostrum alias corrupti esse consectetur ad, temporibus.</p>


    <hr>
    <div class="modeller">
        <div class="sira">
            <figure><img src="m1.png" alt=""></figure>
            <figure><img src="m2.png" alt=""></figure>
            <figure><img src="m3.png" alt=""></figure>
        </div>
    </div>
    <div class="modeller">
        <div class="sira">
            <figure><img src="m2.png" alt=""></figure>
            <figure><img src="m1.png" alt=""></figure>
            <figure><img src="m3.png" alt=""></figure>
        </div>
    </div>
    <div class="modeller">
        <div class="sira">
            <figure><img src="m3.png" alt=""></figure>
            <figure><img src="m2.png" alt=""></figure>
            <figure><img src="m1.png" alt=""></figure>
        </div>
    </div>


</div>
</section>


CSS
-----
body{
    margin: 0;
    padding: 0;
    height: 2000px;
}
.contain{
    background: #ddd;
}
section{
    width: 600px;
    padding: 20px;
    margin: 120px auto;
    text-align: center;
}
figure{
    display: inline-block;
    border: 1px solid;
    margin: 5px 5px;
    padding: 0;
    opacity: 0;
    transition:all .5s ease-in-out;
}
.goster{
    transform:translate(10px,0px);
    opacity: 1;
}
figure img{
    width: 180px;
    height: 200px;
   

}




.header{
    margin: 0 auto;
    height: 600px;
    max-width: 1600px;
    background: url("bg.png");
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    position: relative;
    overflow: hidden;
}
.logo{
    width: 1000px;
    height: 194px;
    background: url("logo.png");
    background-repeat: no-repeat;
    background-position: center left;
    position: absolute;
    left: 50%;
    margin-left: -34%;
    top: 150px;

}
.karga{
    width: 900px;
    height: 843px;
    background: url("karga.png")no-repeat right bottom;
    position: absolute;
    left: 450px;
    top: 100px;
}
JS
-------
$(window).scroll(function() {
    var wScroll = $(this).scrollTop();
    $(".logo").css({
        "transform": 'translate(0px,-'+wScroll/1.8+'%)'
    });

    $(".karga").css({
        "transform": 'translate(0px,-'+wScroll/10+'%)'
    });

    /*Model resimleri*/
    if (wScroll > $(".modeller").offset().top - $(window).height()/1.2) {
        $(".modeller figure").each(function(i) {

            setInterval(function(){
                $(".modeller figure").eq(i).addClass('goster');
            },150*(i+1));

        });
    }

});