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(-${ children[i].style.transform = `translateY(-${
(target.scrollTop * (i + 1)) / 5 (target.scrollTop * (i + 1)) / 5
}px)`; }px)`;
if ( // if (
children[i].classList.contains("background-2") && // children[i].classList.contains("background-2") &&
target.scrollTop % 6 === 0 // target.scrollTop % 6 === 0
) { // ) {
children[i].style.setProperty( // children[i].style.setProperty(
"--frame", // "--frame",
`var(--frame-${this.imageIndex})` // `var(--frame-${this.imageIndex})`
); // );
if (this.imageIndex === 10) { // if (this.imageIndex === 10) {
this.imageIndex = 1; // this.imageIndex = 1;
} else { // } else {
this.imageIndex++; // this.imageIndex++;
} // }
} // }
} }
} }

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

@ -34,17 +34,16 @@ body {
height: 100%; height: 100%;
text-align: center; text-align: center;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: rotateY(0) scale(1); transition: transform;
} transition-duration: 0.5s;
&:hover { transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
z-index: 999;
} }
&:hover .rewind-card__inner { &:hover .rewind-card__inner {
animation-name: flip-zoom; transform: rotateY(180deg);
animation-direction: normal; }
animation-fill-mode: both; &:hover {
animation-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78); animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
animation-duration: 0.5s; z-index: 999;
} }
.rewind-card.-back { .rewind-card.-back {
transform: rotateY(180deg); transform: rotateY(180deg);
@ -61,13 +60,13 @@ body {
@keyframes flip-zoom { @keyframes flip-zoom {
0% { 0% {
transform: rotateY(0) scale(1); transform: scale(1);
} }
50% { 50% {
transform: rotateY(0) scale(0.9); transform: scale(0.9);
} }
100% { 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 { .rewind-container {
border-radius: var(--d-border-radius); border-radius: var(--d-border-radius);
box-sizing: border-box; box-sizing: border-box;
@ -61,15 +47,12 @@
} }
.background-2 { .background-2 {
--frame: var(--frame-1);
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 1000%; height: 1000%;
background: var(--frame); background: url(/plugins/discourse-rewind/images/bg-2.png);
background-size: contain; background-size: contain;
transform: translateY(0px); transform: translateY(0px);
will-change: background;
backface-visibility: hidden;
} }
.rewind__scroll-wrapper { .rewind__scroll-wrapper {