js/parallax-header.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const targetMin = -10;
const targetMax = 25;
let currentPercent = targetMin;
let targetPercent = targetMin;
const tweenSpeed = 0.040;

document.addEventListener("scroll", () => {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  let scrollFraction = scrollTop / docHeight;
  targetPercent = targetMin + (targetMax - targetMin) * scrollFraction;
});

function animate() {
  currentPercent += (targetPercent - currentPercent) * tweenSpeed;
  currentPercent = Math.max(Math.min(targetMax, currentPercent), targetMin);
  document.documentElement.style.setProperty('--scroll-percent', currentPercent + '%');
  requestAnimationFrame(animate);
}

animate();