Edit in JSFiddle

function subscribeScroll(element, cb) {
    if (typeof (cb) != "undefined") {
        $(window).scroll(function (event) {
            var win = $(window),
                el = $(element);
            //[0~1]
            var winTopRatio = (win.scrollTop() + win.height() - el.offset().top) / win.height();
            //[-1~0]
            var winBtmRatio = (win.scrollTop() - el.offset().top - el.height()) / win.height();
            var elRatio = (win.scrollTop() + win.height() - el.offset().top) / el.height();
            //isShown
            //scrollTopRatio >= 0 && scrollBtmRatio <= 0
            cb(el, winTopRatio, winBtmRatio, elRatio, winTopRatio >= 0 && winBtmRatio <= 0);
        });
    }
}

$(".page").each(function (i, element) {
    subscribeScroll(element, function (el, topRatio, btmRatio, elRatio, isShown) {
        el.css("margin-left", (1 - elRatio) * 100 + "%");
    });
});

<section>
    <div class="page page1"></div>
    <div class="page page2"></div>
    <div class="page page3"></div>
    <div class="page page4"></div>
    <div class="page page5"></div>
</section>

section {
    overflow: hidden;
}
.page {
    height: 400px;
}
.page1 {
    background: #B4997F;
}
.page2 {
    background: #F79566;
}
.page3 {
    background: #F2CC9E;
}
.page4 {
    background: #F9E68F;
}
.page5 {
    background: #9DA15D;
}
.slide-in {
    animation: slide-in 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-animation: slide-in 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes slide-in {
    from {
        transform: translateX(50px);
    }
}
@-webkit-keyframes slide-in {
    from {
        -webkit-transform: translateX(50px);
    }
}