fly in on scroll down

by mrcharis

HTML

<div id="container">
    <div class="instructionbox">Scroll down to see the fly-in effect. What I want is for the effect to be reversed on scroll up so the boxes fly-out</div>
    <div class="box "></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <br />
    <div class="box"></div>
</div>

CSS

#container {
    height:3000px;
    width:960px;
    background:#66B3FF;
    margin:auto;
}
.instructionbox {
    height:50px;
    width:400px;
    background:#FFF;
    position:relative;
    top:100px;
    left:200px;
}
.box {
    height:100px;
    width:200px;
    background:#993;
    position:relative;
    top:500px;
    left:200px;
}
.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50% {
        ransform: translateX(-8%);
    }
    65% {
        transform: translateX(4%);
    }
    80% {
        transform: translateX(-4%);
    }
    95% {
        transform: translateX(2%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50% {
        -webkit-transform: translateX(-8%);
    }
    65% {
        -webkit-transform: translateX(4%);
    }
    80% {
        -webkit-transform: translateX(-4%);
    }
    95% {
        -webkit-transform: translateX(2%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50% {
        transform: translateX(8%);
    }
    65% {
        transform: translateX(-4%);
    }
    80% {
        transform: translateX(4%);
    }
    95% {
        transform: translateX(-2%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes...

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}






$(window).scroll(function () {


    $('.box').each(function (i) {


        if (isScrolledIntoView(this)) {
            $(this).addClass("slideRight");


        }


    });




});