On gists

JS Parallax

JavaScript

parallax.js Raw #

// https://github.com/yablko/responzivny-web-kurz/blob/crave-game-verzia-z-kurzu/index.html

		const headerEl = document.querySelector('header')
		const logoEl = document.querySelector('.crave-logo img')
		const setTranslate = (xPos, yPos, el) => {
			el.style.transform = `translate3d(${xPos}, ${yPos}px, 0)`;
		}
		let xScrollPosition;
		let yScrollPosition;
		const scrollLoop = () => {
			xScrollPosition = window.scrollX;
			yScrollPosition = window.scrollY;
			setTranslate(0, yScrollPosition * 0.75, headerEl);
			setTranslate(0, yScrollPosition * -0.25, logoEl);
			requestAnimationFrame(scrollLoop);
		}
		window.addEventListener('DOMContentLoaded', scrollLoop, false);