Add parallax effect to background

2026-03-07 10:37:58 +00:00 · 2023-07-17 23:17:11 -04:00
parent 21d70b4a8a
commit b2f80c3a92
12 changed files with 155 additions and 32 deletions
--- a/themes/clortox/static/js/scramble.js
+++ b/themes/clortox/static/js/scramble.js
@@ -4,6 +4,13 @@ window.onload = function() {
    document.querySelectorAll(".scramble").forEach(item => {
        item.addEventListener("mouseover", scramble);
    });
+
+    window.addEventListener('scroll', function() {
+        const parallax = document.querySelector('.parallax')
+        let scrollPosition = window.pageYOffset;
+
+        parallax.style.transform = 'translateY(' + scrollPosition * .5 + 'px)';
+    })
 }

 function scramble(event){