summaryrefslogtreecommitdiffhomepage
path: root/js/parallax-header.js
diff options
context:
space:
mode:
authortradam <[email protected]>2025-11-18 23:46:33 +0000
committertradam <[email protected]>2025-11-18 23:46:33 +0000
commit05706ec17d5c359ba86aa9cdd7685e637b4e25ab (patch)
tree288952ddd1ce9b84bdd71021b123137730e8679f /js/parallax-header.js
parent1743bc1b52f390e3942158fa7e911417bc869ee3 (diff)
downloadmalcz-wordpress-theme-main.tar.gz
malcz-wordpress-theme-main.zip
Diffstat (limited to 'js/parallax-header.js')
-rwxr-xr-xjs/parallax-header.js21
1 files changed, 21 insertions, 0 deletions
diff --git a/js/parallax-header.js b/js/parallax-header.js
new file mode 100755
index 0000000..52990f8
--- /dev/null
+++ b/js/parallax-header.js
@@ -0,0 +1,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();