mirror of
https://git.suyu.dev/suyu/website.git
synced 2025-12-29 02:34:59 +01:00
carousel
This commit is contained in:
not-nullptr
parent
cdda72288f
commit
25884e797e
19 changed files with 1264 additions and 125 deletions
|
|
@ -1,9 +1,72 @@
|
|||
<div class="card">mayro odisy</div>
|
||||
<script lang="ts">
|
||||
export let compatibility: "goated" | "based" | "cringe";
|
||||
export let image: string;
|
||||
export let title: string;
|
||||
export let releaseYear: number;
|
||||
|
||||
function capitalizeFirstLetter(string: string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src={image || ""} alt="Mario Odyssey" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3 class="header">{title}</h3>
|
||||
<div class="content">Released: {releaseYear}</div>
|
||||
<div>
|
||||
Compatibility: <span class={compatibility}>{capitalizeFirstLetter(compatibility)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
aspect-ratio: 1.5/2;
|
||||
width: 300px;
|
||||
background-color: red;
|
||||
width: fit-content;
|
||||
height: 450px;
|
||||
background-color: rgb(47, 57, 76);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 0 24px rgb(32, 33, 45);
|
||||
border: solid thin rgb(101, 109, 132);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid thin rgb(101, 109, 132);
|
||||
}
|
||||
|
||||
.card-image > img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.goated {
|
||||
color: #78dca0;
|
||||
text-shadow: 0px 0px 8px #78dca0;
|
||||
}
|
||||
|
||||
.based {
|
||||
color: #eab876;
|
||||
text-shadow: 0px 0px 8px #eab876;
|
||||
}
|
||||
|
||||
.cringe {
|
||||
color: #ff3a3a;
|
||||
text-shadow: 0px 0px 8px #ff3a3a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
283
src/components/CardCarousel.svelte
Normal file
283
src/components/CardCarousel.svelte
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<script lang="ts">
|
||||
import { onMount, tick } from "svelte";
|
||||
import Card from "$components/Card.svelte";
|
||||
import type { ICard } from "$lib/util/types";
|
||||
|
||||
export let cards: ICard[];
|
||||
|
||||
let selectedCard = 0;
|
||||
let instantSelectedCard = 0;
|
||||
|
||||
let animating = false;
|
||||
|
||||
async function go(dir: number) {
|
||||
if (dir > 0) {
|
||||
cardScroll({
|
||||
deltaY: 100,
|
||||
shiftKey: true,
|
||||
preventDefault: () => {},
|
||||
} as any);
|
||||
} else {
|
||||
cardScroll({
|
||||
deltaY: -100,
|
||||
shiftKey: true,
|
||||
preventDefault: () => {},
|
||||
} as any);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const key = (e: KeyboardEvent) => {
|
||||
// right arrow, run cardScroll with positive
|
||||
if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
go(1);
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
go(-1);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", key);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", key);
|
||||
};
|
||||
});
|
||||
|
||||
async function cardScroll(e: WheelEvent) {
|
||||
if (!e.shiftKey || window.innerWidth < 560) return;
|
||||
e.preventDefault();
|
||||
const animations: Animation[] = [];
|
||||
const duration = 500;
|
||||
const easing = "cubic-bezier(.29,1.03,.5,1)";
|
||||
if (animating) return;
|
||||
animating = true;
|
||||
if (e.deltaY > 0) {
|
||||
instantSelectedCard = (selectedCard + 1) % cards.length;
|
||||
} else {
|
||||
instantSelectedCard = (selectedCard - 1 + cards.length) % cards.length;
|
||||
}
|
||||
const cardLeft = document.querySelector(".card-3d.left") as HTMLElement;
|
||||
const cardRight = document.querySelector(".card-3d.right") as HTMLElement;
|
||||
const cardCenter = document.querySelector(
|
||||
".card-3d:not(.left):not(.right):not(.transition-left):not(.transition-right)",
|
||||
) as HTMLElement;
|
||||
const cardTransitionLeft = document.querySelector(
|
||||
".card-3d.transition-left",
|
||||
) as HTMLElement;
|
||||
const cardTransitionRight = document.querySelector(
|
||||
".card-3d.transition-right",
|
||||
) as HTMLElement;
|
||||
cardTransitionLeft.style.display = "block";
|
||||
cardTransitionRight.style.display = "block";
|
||||
setTimeout(async () => {
|
||||
selectedCard = instantSelectedCard;
|
||||
await tick();
|
||||
cardTransitionLeft.style.display = "none";
|
||||
cardTransitionRight.style.display = "none";
|
||||
animations.forEach((anim) => anim.cancel());
|
||||
setTimeout(() => {
|
||||
animating = false;
|
||||
}, 10);
|
||||
}, duration);
|
||||
const cardLeftBounds = cardLeft.getBoundingClientRect();
|
||||
const cardRightBounds = cardRight.getBoundingClientRect();
|
||||
const cardCenterBounds = cardCenter.getBoundingClientRect();
|
||||
if (e.deltaY > 0) {
|
||||
animations.push(
|
||||
cardRight.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardCenterBounds.left - cardRightBounds.left + 62}px)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardCenter.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardLeftBounds.left - cardCenterBounds.left - 83}px) perspective(1000px) translateZ(-150px) rotateY(-50deg)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardLeft.animate(
|
||||
[
|
||||
{
|
||||
opacity: 0,
|
||||
transform:
|
||||
"perspective(1000px) translateZ(-150px) rotateY(-80deg) translateX(-400px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardTransitionLeft.animate(
|
||||
[
|
||||
{
|
||||
transform:
|
||||
"translateX(1150px) perspective(1000px) translateZ(-400px) rotateY(80deg)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform:
|
||||
"translateX(1013px) perspective(1000px) translateZ(-150px) rotateY(50deg)",
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
animations.push(
|
||||
cardLeft.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardCenterBounds.left - cardLeftBounds.left + 83}px)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardCenter.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardRightBounds.left - cardCenterBounds.left - 62}px) perspective(1000px) translateZ(-150px) rotateY(50deg)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardRight.animate(
|
||||
[
|
||||
{
|
||||
opacity: 0,
|
||||
transform:
|
||||
"perspective(1000px) translateZ(-150px) rotateY(80deg) translateX(400px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardTransitionRight.animate(
|
||||
[
|
||||
{
|
||||
transform:
|
||||
"translateX(-1150px) perspective(1000px) translateZ(-400px) rotateY(-80deg)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform:
|
||||
"translateX(-1013px) perspective(1000px) translateZ(-150px) rotateY(-50deg)",
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- look, i don't hate the disabled, but this
|
||||
site's concept is pretty inaccessible as it
|
||||
is (and i just so happen to be partially blind
|
||||
in an eye, so), also we do have keyboard events
|
||||
we just register them through onMount() so fuck
|
||||
you a11y -->
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="cards" on:wheel={cardScroll}>
|
||||
<div class="card-3d transition-left">
|
||||
<Card {...cards[(instantSelectedCard + 1) % cards.length]} />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="card-3d left" on:click={() => go(-1)}>
|
||||
<Card {...cards[selectedCard - 1 < 0 ? cards.length - 1 : selectedCard - 1]} />
|
||||
</div>
|
||||
<div class="card-3d">
|
||||
<Card {...cards[selectedCard]} />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="card-3d right" on:click={() => go(1)}>
|
||||
<Card {...cards[(selectedCard + 1) % cards.length]} />
|
||||
</div>
|
||||
<div class="card-3d transition-right">
|
||||
<Card {...cards[(instantSelectedCard + 2) % cards.length]} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cards {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-3d {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.card-3d.left {
|
||||
transform: perspective(1000px) translateZ(-150px) rotateY(-50deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-3d.right {
|
||||
transform: perspective(1000px) translateZ(-150px) rotateY(50deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-3d {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-3d.transition-left,
|
||||
.card-3d.transition-right {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.card-3d {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.cards {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
src/components/ScrollIcon.svelte
Normal file
25
src/components/ScrollIcon.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
export let size: number;
|
||||
export let color: string;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 100 125"
|
||||
style="enable-background:new 0 0 100 100;"
|
||||
xml:space="preserve"
|
||||
fill={color}
|
||||
><path
|
||||
d="M32,41v18c0,9.9,8.1,18,18,18c9.9,0,18-8.1,18-18V41c0-9.9-8.1-18-18-18C40.1,23,32,31.1,32,41z M50,27c7.7,0,14,6.3,14,14 v18c0,7.7-6.3,14-14,14s-14-6.3-14-14V41C36,33.3,42.3,27,50,27z"
|
||||
/><path
|
||||
d="M50,44c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2s-2,0.9-2,2v6C48,43.1,48.9,44,50,44z"
|
||||
/><path
|
||||
d="M48.6,92.4C49,92.8,49.5,93,50,93s1-0.2,1.4-0.6l5-5c0.8-0.8,0.8-2,0-2.8s-2-0.8-2.8,0L50,88.2l-3.6-3.6 c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8L48.6,92.4z"
|
||||
/><path
|
||||
d="M48.6,7.6l-5,5c-0.8,0.8-0.8,2,0,2.8C44,15.8,44.5,16,45,16s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6C54,15.8,54.5,16,55,16 s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8l-5-5C50.6,6.8,49.4,6.8,48.6,7.6z"
|
||||
/></svg
|
||||
>
|
||||
Loading…
Add table
Add a link
Reference in a new issue