jQuery パララックス下地

<section>
<!-- スクロールアニメーション -->

<div class="scrEvent area1"><p>コンテンツエリア_1</p></div>
<div class="scrEvent area2"><p>コンテンツエリア_2</p></div>
<div class="scrEvent area3"><p>コンテンツエリア_3</p></div>
<div class="scrEvent area4"><p>コンテンツエリア_4</p></div>
<div class="scrEvent area5"><p>コンテンツエリア_5</p></div>
<div class="scrEvent area6"><p>コンテンツエリア_6</p></div>

</section>

<style>

/*-- スクロールアニメーション --*/

.scrEvent {height: 500px; text-align: left;display: none;}

.area1 {background: #fff;}
.area2 {background: #eee;}
.area3 {background: #ddd;}
.area4 {background: #ccc;}
.area5 {background: #bbb;}
.area6 {background: #aaa;}

p{padding: 100px; 0; text-align: center;}

</style>

<script>

/*--- スクロールアニメーション　---*/

$(function(){
var setArea = $('.scrEvent'),
showHeight = 200;

setArea.css({display:'block',opacity: '0'});

$(window).on('load scroll resize',function(){
setArea.each(function(){
var setThis = $(this),
areaTop = setThis.offset().top;

if ($(window).scrollTop() > (areaTop + showHeight) - $(window).height()) {
setThis.stop().animate({opacity: '1'}, 555);
} else {
setThis.stop().animate({opacity: '0'}, 555);
}

});
});
});

</script>