discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-07 14:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

parallax

Browse Source
This commit is contained in:
Joffrey JAFFEUX 2025-01-03 16:52:21 +01:00
parent 1ce828080f
commit 5b916dcf1c
2 changed files with 17 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/javascripts/discourse/components/rewind.gjs
View File

@ -59,16 +59,18 @@ export default class Rewind extends Component {
} }
@action @action
handleScroll() { handleScroll({ target }) {
window.addEventListener("scroll", () => { let children = this.rewindContainer.getElementsByClassName("parallax-bg");
let parent = document.getElementById("div.rewind"); for (let i = 1; i < children.length; i++) {
let children = parent.getElementsByClassName(".parallax-bg"); children[i].style.transform = `translateY(-${
for (let i = 0; i < children.length; i++) { (target.scrollTop * i) / children.length
children[i].style.transform = `translateY(-${ }px)`;
(window.pageYOffset * i) / children.length }
}px)`; }
}
}); @action
registerRewindContainer(element) {
this.rewindContainer = element;
} }
<template> <template>
@ -79,12 +81,12 @@ export default class Rewind extends Component {
}} }}
{{didInsert this.loadRewind}} {{didInsert this.loadRewind}}
{{on "keydown" this.handleEscape}} {{on "keydown" this.handleEscape}}
{{didInsert this.registerRewindContainer}}
tabindex="0" tabindex="0"
> >
<div class="rewind"> <div class="rewind">
<div class="background-1 parallax-bg"> <div class="background-1 parallax-bg"></div>
</div>
<div class="background-2 parallax-bg"></div> <div class="background-2 parallax-bg"></div>
{{#if this.loadingRewind}} {{#if this.loadingRewind}}
<div class="rewind-loader"> <div class="rewind-loader">
@ -92,24 +94,6 @@ export default class Rewind extends Component {
<div class="rewind-loader__text">Crunching your data...</div> <div class="rewind-loader__text">Crunching your data...</div>
</div> </div>
{{else}} {{else}}
{{! <img
src="/plugins/discourse-rewind/images/blue_blob.svg"
class="blob_1"
/>
<img
src="/plugins/discourse-rewind/images/yellow_blob.svg"
class="blob_2"
/>
<img
src="/plugins/discourse-rewind/images/red_blob.svg"
class="blob_3"
/>
<img
src="/plugins/discourse-rewind/images/discourse_blob_1.svg"
class="blob_4"
/> }}
<DButton <DButton
class="rewind__exit-fullscreen-btn" class="rewind__exit-fullscreen-btn"
@icon={{if this.fullScreen "discourse-compress" "discourse-expand"}} @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
@ -119,6 +103,7 @@ export default class Rewind extends Component {
<div <div
class="rewind__scroll-wrapper" class="rewind__scroll-wrapper"
{{didInsert this.registerScrollWrapper}} {{didInsert this.registerScrollWrapper}}
{{on "scroll" this.handleScroll}}
> >
<div class="rewind-report"> <div class="rewind-report">
<Introduction /> <Introduction />

4
assets/stylesheets/common/rewind.scss
View File

@ -49,9 +49,9 @@
.background-2 { .background-2 {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 300%; height: 100%;
background: url(/plugins/discourse-rewind/images/bg-2.png); background: url(/plugins/discourse-rewind/images/bg-2.png);
background-size: contain; background-size: cover;
transform: translateY(0px); transform: translateY(0px);
} }