簡易パララックススクロール

by iwbjp

HTML

<div id="bg1">
<div id="bg2">
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
<p>テキストが入ります。</p>
</div><!--//#bg2-->
</div><!--//#bg1-->

CSS

p {
  margin-bottom: 500px;
  font-size: 100px;
}

html {
  background: url(bg_back.png) repeat center top;
}

body {
  background: url(bg_front.png) repeat center top;
}

JavaScript

$(function(){
  $(window).on('load scroll',function(){
    var scrollpx = $(this).scrollTop();
    var bg  = scrollpx / 10;
    $("body").css("background-position", "center " + bg + 'px');
  });
});