【jQuery】スクロール時に背景画像をスクロールの逆方向へ動かすパララックスアニメーションの実装方法(topプロパティを使用)のデモページ

.wrap {
  position: relative;
  line-height: 1.5;
  overflow: hidden;
  padding: 1000px 0;
}

.bg01 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 3000px;
  transition: top 1.5s ease-out;
  background: url("/demo01/demo-bg-anime/bg01.png") repeat-y center top;
}

.bg02 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 3000px;
  transition: top 1.5s ease-out;
  background: url("/demo01/demo-bg-anime/bg02.png") repeat-y center top;
}
  

$(window).on('scroll load', function(){
 var bg = $(window).scrollTop();
  $('.bg01').css({top:bg/10*-1});
  $('.bg02').css({top:bg/5*-1});
});