To create a spinning tire effect as the background of my website, I need to implement very fast parallax scrolling. However, I encountered an issue where using position: absolute; on the background image caused the screen to jerk back up at the end of scrolling. Removing position: absolute; fixed the jerking but prevented the parallax scrolling from working properly. I am looking for suggestions on how to achieve fast background movement relative to the foreground without these issues.
I am currently using Bootstrap v4-alpha and the CDNs for jQuery and Popper from that version.
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('body').css('top', -(scrollTop * 4) + 'px');
});body {
background-image: url("/pexels-photo.jpg");
/*background-repeat: repeat;*/
position: absolute;
}
form#search {
margin-top: 3%;
}
form#search>div.d-inline-block {
width: 29%;
margin: .5%;
}
form#search>div.d-inline-block#quantity {
width: 5%;
margin: .5%;
}
... (rest of the CSS code)
Live Demo