スクロールに連動してふわっと表示

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

$(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');
            }
        });
    });
});

.wp {
	display: flex;
	background:#eee;
	}
.box {
	background:#eee;
	width: 300px;
	height: 200px;
	margin: 3rem auto;
	}
.view {
	opacity : 0;
	transform : translate(0, 70px);
	transition : all 500ms;
	}
.view.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
.wp.opacity1 .view {
	opacity : 1;
	}
.wp.opacity1 .box {
	margin: 1rem auto 3rem;
	}