discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-08 06:32:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

better card flip

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-03 20:03:03 -06:00
parent 4f381a5da7
commit 6c4142b4d4
3 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,20 +69,20 @@ export default class Rewind extends Component {
children[i].style.transform = `translateY(-${
(target.scrollTop * (i + 1)) / 5
}px)`;
if (
children[i].classList.contains("background-2") &&
target.scrollTop % 6 === 0
) {
children[i].style.setProperty(
"--frame",
`var(--frame-${this.imageIndex})`
);
if (this.imageIndex === 10) {
this.imageIndex = 1;
} else {
this.imageIndex++;
}
}
// if (
// children[i].classList.contains("background-2") &&
// target.scrollTop % 6 === 0
// ) {
// children[i].style.setProperty(
// "--frame",
// `var(--frame-${this.imageIndex})`
// );
// if (this.imageIndex === 10) {
// this.imageIndex = 1;
// } else {
// this.imageIndex++;
// }
// }
}
}

23
assets/stylesheets/common/card.scss
View File

@ -34,17 +34,16 @@ body {
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
}
&:hover {
z-index: 999;
transition: transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
}
&:hover .rewind-card__inner {
animation-name: flip-zoom;
animation-direction: normal;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
animation-duration: 0.5s;
transform: rotateY(180deg);
}
&:hover {
animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
z-index: 999;
}
.rewind-card.-back {
transform: rotateY(180deg);
@ -61,13 +60,13 @@ body {
@keyframes flip-zoom {
0% {
transform: rotateY(0) scale(1);
transform: scale(1);
}
50% {
transform: rotateY(0) scale(0.9);
transform: scale(0.9);
}
100% {
transform: rotateY(180deg) scale(1.25);
transform: scale(1.25);
}
}

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

@ -1,17 +1,3 @@
:root {
--frame-1: url(/plugins/discourse-rewind/images/bg-frames/bg-2_1.png);
--frame-2: url(/plugins/discourse-rewind/images/bg-frames/bg-2_2.png);
--frame-3: url(/plugins/discourse-rewind/images/bg-frames/bg-2_3.png);
--frame-4: url(/plugins/discourse-rewind/images/bg-frames/bg-2_4.png);
--frame-5: url(/plugins/discourse-rewind/images/bg-frames/bg-2_5.png);
--frame-6: url(/plugins/discourse-rewind/images/bg-frames/bg-2_6.png);
--frame-7: url(/plugins/discourse-rewind/images/bg-frames/bg-2_7.png);
--frame-8: url(/plugins/discourse-rewind/images/bg-frames/bg-2_8.png);
--frame-9: url(/plugins/discourse-rewind/images/bg-frames/bg-2_9.png);
--frame-10: url(/plugins/discourse-rewind/images/bg-frames/bg-2_10.png);
--frame-11: url(/plugins/discourse-rewind/images/bg-frames/bg-2_11.png);
}
.rewind-container {
border-radius: var(--d-border-radius);
box-sizing: border-box;
@ -61,15 +47,12 @@
}
.background-2 {
--frame: var(--frame-1);
position: absolute;
width: 100%;
height: 1000%;
background: var(--frame);
background: url(/plugins/discourse-rewind/images/bg-2.png);
background-size: contain;
transform: translateY(0px);
will-change: background;
backface-visibility: hidden;
}
.rewind__scroll-wrapper {