I'm trying to create a parallax effect in firefox by modifying the top position of elements using the onscroll event. I throttled the onscroll event so it doesn't overload the browser and I added a transition top property in the css to make things smoother. This works pretty well in every browser, but firefox is extremely choppy for some reason. Is there any way to make this transition smoother?
window.onscroll = throttle(function(){
var scrollDistance = window.pageYOffset || window.document.documentElement.scrollTop || window.document.body.scrollTop;
document.getElementById("back").style.top = -scrollDistance * 0.3 + "px";
document.getElementById("mid").style.top = -scrollDistance * 0.5 + "px";
document.getElementById("fore").style.top = -scrollDistance * 0.9 + "px";
}, 100);
function throttle (callback, limit) {
var wait = false;
retu function () {
if (!wait) {
callback.call();
wait = true;
setTimeout(function () {
wait = false;
}, limit);
}
}
}
body{
height: 5000px;
background: url(http://lorempixel.com/output/city-q-c-1920-1920-4.jpg);
}
.parallaxEl {
width: 1920px;
height: 1080px;
position: fixed;
transition: top 0.1s;
}
#back{
background: url(http://wall.rimbuz.com/wp-content/uploads/4K-Wide-Wallpapers.jpg);
}
#mid{
background: url(https://wallpaperscraft.com/image/space_planet_background_83807_3840x2160.jpg);
}
#fore{
background: url(http://wall.rimbuz.com/wp-content/uploads/4K-HD-Background-Wallpapers.jpg);
}
<body>
<div class="parallaxEl" id="back"></div>
<div class="parallaxEl" id="mid"></div>
<div class="parallaxEl" id="fore"></div>
</body>