From 5b916dcf1c28549938f7d254f5e3678a63810c89 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 3 Jan 2025 16:52:21 +0100 Subject: [PATCH] parallax --- .../discourse/components/rewind.gjs | 45 +++++++------------ assets/stylesheets/common/rewind.scss | 4 +- 2 files changed, 17 insertions(+), 32 deletions(-) diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs index b06eb73..5a332ad 100644 --- a/assets/javascripts/discourse/components/rewind.gjs +++ b/assets/javascripts/discourse/components/rewind.gjs @@ -59,16 +59,18 @@ export default class Rewind extends Component { } @action - handleScroll() { - window.addEventListener("scroll", () => { - let parent = document.getElementById("div.rewind"); - let children = parent.getElementsByClassName(".parallax-bg"); - for (let i = 0; i < children.length; i++) { - children[i].style.transform = `translateY(-${ - (window.pageYOffset * i) / children.length - }px)`; - } - }); + handleScroll({ target }) { + let children = this.rewindContainer.getElementsByClassName("parallax-bg"); + for (let i = 1; i < children.length; i++) { + children[i].style.transform = `translateY(-${ + (target.scrollTop * i) / children.length + }px)`; + } + } + + @action + registerRewindContainer(element) { + this.rewindContainer = element; }