I created a simple parallax effect for a hero image:
https://jsfiddle.net/176ns5f3/
<header role="presentation" class="parallax">
</header>
<article>
</article>
window.addEventListener("scroll", throttle(scroll, 15));
function throttle(fn, wait) {
var time = Date.now();
return function () {
if (time + wait - Date.now() < 0) {
fn();
time = Date.now();
}
};
}
let parallax = document.querySelector(".parallax");
function scroll() {
var currentScrollPos = window.pageYOffset;
var coords = currentScrollPos * 0.5 + "px";
parallax.style.transform = "translate3d(0," + coords + ",0)";
}
It runs fine on my i7 laptop however on older devices it is a bit stuttery.
I created my own js as I thought it would be more efficient however it doesn't seem to be the case?