progress

1 files changed, 20 insertions, 0 deletions

diff --git a/js/parallax-header.js b/js/parallax-header.js
new file mode 100644
index 0000000..c4ce1fc
--- /dev/null
+++ b/js/parallax-header.js
@@ -0,0 +1,20 @@
+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;
+  document.documentElement.style.setProperty('--scroll-percent', currentPercent + '%');
+  requestAnimationFrame(animate);
+}
+
+animate();