HTML

<section class="effect-fade">
 <h1>タイトル1</h1>
 <p>説明文1</p>
</section>

<section class="effect-fade">
 <h1>タイトル2</h1>
 <p>説明文2</p>
</section>

<section class="effect-fade">
 <h1>タイトル3</h1>
 <p>説明文3</p>
</section>

css

.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}

js

$(function(){
　$(window).scroll(function (){
    $('.effect-fade').each(function(){
        var elemPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > elemPos - windowHeight){
            $(this).addClass('effect-scroll');
        }
    });
　});
});