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

Adjustments to card stack animation

Browse source
This commit is contained in:
Adam Iannazzone 2024-10-16 14:42:47 -04:00
parent f056f86803
commit b6bc55e543
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
css/carousel.css
View file

@ -2,6 +2,7 @@
position: relative; position: relative;
display: flex; display: flex;
padding-right: 30px; padding-right: 30px;
cursor: pointer;
} }
#features .row:nth-child(odd) .stack { #features .row:nth-child(odd) .stack {
@ -10,13 +11,12 @@
.screenshot { .screenshot {
position: relative; position: relative;
/* transition: bottom 400ms; */ transition: bottom 250ms;
} }
.screenshot:nth-child(3) { .screenshot:nth-child(3) {
z-index: 4; z-index: 4;
left: -200%; left: -200%;
cursor: pointer;
} }
.screenshot:nth-child(2) { .screenshot:nth-child(2) {
@ -53,6 +53,15 @@
} }
} */ } */
@keyframes shift {
50% {
transform: translate(-5px, 5px);
}
to {
transform: translate(0, 0);
}
}
@keyframes fade-out { @keyframes fade-out {
0% { 0% {
/* z-index: 3; */ /* z-index: 3; */
@ -62,19 +71,23 @@
100% { 100% {
/* z-index: 0; */ /* z-index: 0; */
opacity: 0; opacity: 0;
left: calc(-200% - 10px);
bottom: -30px; bottom: -30px;
scale: 1.05;
} }
} }
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
/* z-index: 3; */ bottom: 30px;
bottom: 0; left: 30px;
opacity: 10px; opacity: 0;
scale: 0.95;
} }
100% { 100% {
/* z-index: 0; */
opacity: 1; opacity: 1;
left: 20px;
bottom: 20px; bottom: 20px;
scale: 1.0;
} }
} }

2
index.html
View file

@ -234,14 +234,12 @@
<div class="container-fluid mb-4" id="features"> <div class="container-fluid mb-4" id="features">
<div class="row align-items-center mt-3 mb-3"> <div class="row align-items-center mt-3 mb-3">
<div class="col-12 col-lg-8 stack"> <div class="col-12 col-lg-8 stack">
<!-- <div class="stack"> -->
<img src="assets/screens/screen01.png" class="img-fluid screenshot" <img src="assets/screens/screen01.png" class="img-fluid screenshot"
alt="The RetroDECK and ES-DE logos on a black screen" /> alt="The RetroDECK and ES-DE logos on a black screen" />
<img src="assets/screens/screen02.png" class="img-fluid screenshot" <img src="assets/screens/screen02.png" class="img-fluid screenshot"
alt="The RetroDECK and ES-DE logos on a black screen" /> alt="The RetroDECK and ES-DE logos on a black screen" />
<img src="assets/screens/screen03.png" class="img-fluid screenshot" <img src="assets/screens/screen03.png" class="img-fluid screenshot"
alt="The RetroDECK and ES-DE logos on a black screen" /> alt="The RetroDECK and ES-DE logos on a black screen" />
<!-- </div> -->
</div> </div>
<div class="col-12 col-lg-4"> <div class="col-12 col-lg-4">
<div class="feature-card p-2 mt-2 mt-lg-0"> <div class="feature-card p-2 mt-2 mt-lg-0">