Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-23 23:25:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change animation to fade/slide

Browse source
This commit is contained in:
Adam Iannazzone 2024-10-16 13:18:08 -04:00
parent 459ae4a604
commit f056f86803
2 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
css/carousel.css
View file

@ -10,12 +10,13 @@
.screenshot {
position: relative;
/* animation: lower 100ms forwards; */
/* transition: bottom 400ms; */
}
.screenshot:nth-child(3) {
z-index: 4;
left: -200%;
cursor: pointer;
}
.screenshot:nth-child(2) {
@ -29,7 +30,7 @@
bottom: 20px;
}
@keyframes lower {
/* @keyframes lower {
from {
animation-timing-function: ease-in-out;
}
@ -50,4 +51,30 @@
transform: translate(30px, -30px) rotate(0deg);
z-index: 0;
}
} */
@keyframes fade-out {
0% {
/* z-index: 3; */
bottom: 0;
opacity: 1;
}
100% {
/* z-index: 0; */
opacity: 0;
bottom: -30px;
}
}
@keyframes fade-in {
0% {
/* z-index: 3; */
bottom: 0;
opacity: 10px;
}
100% {
/* z-index: 0; */
opacity: 1;
bottom: 20px;
}
}

15
scripts/carousel.js
View file

@ -1,9 +1,6 @@
let timing = 2000;
// let stack = document.querySelector(".stack");
let timing = 400;
let stacks = document.getElementsByClassName('stack');
// [...stack.children].reverse().forEach(i => stack.append(i));
for (let i = 0; i < stacks.length; i++) {
[...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
stacks[i].addEventListener("click", swap);
@ -12,10 +9,16 @@ for (let i = 0; i < stacks.length; i++) {
function swap(e) {
let thisTarget = e.target
if (!thisTarget.classList.contains('screenshot')) return;
thisTarget.style.animation = `swap ${timing}ms ease-in-out forwards`;
thisTarget.style.animation = `fade-out ${timing}ms ease-in forwards`;
setTimeout(() => {
thisTarget.style.animation = "";
thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
this.prepend(thisTarget);
// thisTarget.style = '';
}, timing);
setTimeout(() => {
thisTarget.style = '';
}, 2*timing);
}