diff options
| author | tradam <[email protected]> | 2025-11-18 23:46:33 +0000 |
|---|---|---|
| committer | tradam <[email protected]> | 2025-11-18 23:46:33 +0000 |
| commit | 05706ec17d5c359ba86aa9cdd7685e637b4e25ab (patch) | |
| tree | 288952ddd1ce9b84bdd71021b123137730e8679f /js/parallax-header.js | |
| parent | 1743bc1b52f390e3942158fa7e911417bc869ee3 (diff) | |
| download | malcz-wordpress-theme-main.tar.gz malcz-wordpress-theme-main.zip | |
Diffstat (limited to 'js/parallax-header.js')
| -rwxr-xr-x | js/parallax-header.js | 21 |
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(); |
