diff options
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(); |
