<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="wp">
  
<div style="background:#eee;height:200px;margin-bottom:30px;">
  ふわっと表示
</div>

<div class="view">
  ふわっと表示
</div>

<div class="view">
  ふわっと表示
</div>
  
<div class="view">
  ふわっと表示
</div>
  
<div class="view">
  ふわっと表示
</div>
  
<div class="view">
  ふわっと表示
</div>
  
</div>

.wp{
width:300px;
}
.view{
opacity : 0;
transform : translate(0, 70px);
transition : all 500ms;
background:#eee;
height:200px;
margin-bottom:30px;
}
.view.scrollin{
opacity : 1;
transform : translate(0, 0);
}
$(function(){
    $(window).scroll(function (){
        $('.view').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.