【jQuery】How to implement a parallax animation that moves the background image in the opposite direction of scroll when scrolling (Control top property with JavaScript) | Demo page

.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});
});