<div class="wrapper">
    <div class="my-class"></div>
    <div class="not-my-class"></div>
    <div class="my-class"></div>
    <div class="not-my-class"></div>
    <div class="my-class"></div>
</div>

.wrapper {
    width: 100%;
    height: 100%;
}
.my-class, .not-my-class {
    width: 100%;
    height: 350px;
    margin-top: 10px;
    background-color: #888888;
}

function fadeIn($element) {
$scrollTop = $(window).scrollTop();
$windowHeight = $(window).height();
$pageHeight = $('body').height();
$elementHeight = $($element).height();
$baseOffset = $($element).offset().top;
$length = 100;
$finalOffset = $baseOffset + ( $elementHeight / 2 );
$current = ( $scrollTop - ( $finalOffset - ($windowHeight / 2 ) - ( $length / 2 ) ) ) / $length;
if ($current > 1) {
    $current = 1;
}
else {
    if ($current < 0) {
        $current = 0;
    }
    else {}
}
$opacity = $current;
$slide = ( $current * 100 ) - 100;
$(this).css({"opacity": $opacity, "left": $slide, "position": "relative"});
}
$(window).on("load resize scroll",function(){
    $('.my-class').each(fadeIn(this));
});