mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-07-07 06:12:22 +00:00
parallax works : )
This commit is contained in:
parent
5b916dcf1c
commit
bf79dc2512
@ -61,9 +61,9 @@ export default class Rewind extends Component {
|
||||
@action
|
||||
handleScroll({ target }) {
|
||||
let children = this.rewindContainer.getElementsByClassName("parallax-bg");
|
||||
for (let i = 1; i < children.length; i++) {
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.transform = `translateY(-${
|
||||
(target.scrollTop * i) / children.length
|
||||
(target.scrollTop * (i + 1)) / 5
|
||||
}px)`;
|
||||
}
|
||||
}
|
||||
|
@ -39,19 +39,19 @@
|
||||
|
||||
.background-1 {
|
||||
background: url(/plugins/discourse-rewind/images/bg-1.png);
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
transform: translateY(0px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1000%;
|
||||
}
|
||||
|
||||
.background-2 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1000%;
|
||||
background: url(/plugins/discourse-rewind/images/bg-2.png);
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user