Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

HoverCard: Added animations. Button: Persistent shadow when active.

Browse source
This commit is contained in:
Yohan Boujon 2025-04-07 23:09:13 +02:00
parent 625fcb5986
commit 4e7ab8a432
8 changed files with 137 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/lib/components/hover-card.svelte
View file

@ -1,21 +1,90 @@
<script>
import "$lib/css/base.css";
import "$lib/css/hover-card.css"
import "$lib/css/hover-card.css";
import anime from "animejs";
import { compile } from "svelte/compiler";
import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiEye } from "@mdi/js";
import text from "$lib/json/hover-card.json";
export let picture;
export let title = "Title";
export let description = "This is a description, you can add some explaination to your picture in here!";
export let description =
"This is a description, you can add some explaination to your picture in here!";
let divHoverCardOverlay;
let divHoverCardMetadata = {
div: null,
title: null,
description: null,
tip: null,
};
function animateCard(isEntering) {
const opacityValues = [0, 1];
let translateValues = [-30, 0];
if (!isEntering) {
opacityValues.reverse();
translateValues.reverse();
}
anime({
targets: [divHoverCardOverlay, divHoverCardMetadata.div],
opacity: opacityValues,
duration: 400,
easing: "easeInOutQuad",
});
anime({
targets: [divHoverCardMetadata.title, divHoverCardMetadata.tip],
opacity: opacityValues,
translateX: translateValues,
delay: 100,
duration: 500,
easing: "easeInOutQuad",
});
translateValues = translateValues.map((e) => -e);
anime({
targets: [divHoverCardMetadata.description],
opacity: opacityValues,
translateY: translateValues,
delay: 100,
duration: 500,
easing: "easeInOutQuad",
});
}
</script>
<div class="hover-card-container">
<div
class="hover-card-container"
role="button"
tabindex="0"
on:mouseenter={() => {
animateCard(true);
}}
on:mouseleave={() => {
animateCard(false);
}}
>
<div class="hover-card">
<img alt="hover-card" src={picture} />
</div>
<div class="hover-card-overlay"></div>
<div class="hover-card flex-row">
<div class="hover-card-metadata margin-bot-force">
<h1>{title}</h1>
<p>{description}</p>
<div class="hover-card-overlay" bind:this={divHoverCardOverlay}></div>
<div class="hover-card flex-col">
<div
class="hover-card-tip flex-row"
bind:this={divHoverCardMetadata.tip}
>
<SvgIcon type="mdi" path={mdiEye}></SvgIcon>
<span>{text.seemore}</span>
</div>
<div
class="hover-card-metadata margin-bot-force"
bind:this={divHoverCardMetadata.div}
>
<h1 bind:this={divHoverCardMetadata.title}>{title}</h1>
<p bind:this={divHoverCardMetadata.description}>{description}</p>
</div>
</div>
</div>
</div>

1
src/lib/css/base.css
View file

@ -44,6 +44,7 @@ h2 {
--background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
--shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
--shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
--shadow-active: #2c1235a0 0px 20px 30px -10px;
--z-index-last: -1;
--z-index-normal: 0;
--z-index-front: 1;

4
src/lib/css/button.css
View file

@ -3,13 +3,13 @@
border: none;
cursor: pointer;
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
box-shadow: 0px 8px 18px -1px #33283760;
padding: 0.2rem;
transition: var(--transition);
box-shadow: var(--shadow);
}
.button:active {
box-shadow: 0px 4px 10px 0px #2c1235b0;
box-shadow: var(--shadow-active);
transform: translateY(3px);
}

4
src/lib/css/cover-img.css
View file

@ -15,7 +15,7 @@
background: linear-gradient(0deg, #00000000, #261C2C40 50%, #261c2c80 100%);
height: calc(var(--navbar-height)*2);
width: 100%;
z-index: 0;
z-index: var(--z-index-normal);
}
.cover-img-text {
@ -44,7 +44,7 @@
.cover-img-darken {
grid-area: overlay;
background-color: rgb(0, 0, 0, 0.35);
z-index: 0;
z-index: var(--z-index-normal);
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}

38
src/lib/css/hover-card.css
View file

@ -20,6 +20,11 @@
box-shadow: var(--shadow-hover);
}
.hover-card-container:active {
transform: translateY(0.3rem) scale(100%);
box-shadow: var(--shadow-active);
}
.hover-card-container img {
width: 100%;
height: 100%;
@ -36,16 +41,45 @@
grid-area: overlay;
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0,0,0,0) 45%);
background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0, 0, 0, 0) 45%);
opacity: 0;
}
.hover-card-tip {
color: var(--color-background);
background-color: #120e14b0;
width: fit-content;
margin: 0.4rem;
padding: 0.4rem;
padding-right: 0.6rem;
padding-left: 0.6rem;
border-radius: 3rem;
box-shadow: var(--shadow);
opacity: 0;
}
.hover-card-tip svg {
width: 1.4rem;
height: auto;
}
.hover-card-tip span {
font-family: 'JetBrains Mono';
font-weight: 400;
font-size: 0.8rem;
margin-left: 0.5rem;
}
.hover-card-metadata {
width: 100%;
height: 7rem;
color: var(--color-background);
opacity: 0;
}
.hover-card-metadata h1 {
/* Animation */
opacity: 0;
font-family: 'JetBrains Mono';
font-weight: 800;
font-size: 1.3rem;
@ -62,6 +96,8 @@
}
.hover-card-metadata p {
/* Animation */
opacity: 0;
font-family: 'JetBrains Mono';
font-weight: 400;
font-style: italic;

3
src/lib/json/hover-card.json Normal file
View file

@ -0,0 +1,3 @@
{
"seemore": "Voir plus"
}

12
src/lib/json/hub.json
View file

@ -50,13 +50,19 @@
},
"photos": [
{
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg"
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg",
"title": "Tarnished Peak (afterwar)",
"description": "Photo prise à Ben More, Écosse"
},
{
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg"
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg",
"title": "Whitewashed",
"description": "Photo prise à Ben More, Écosse"
},
{
"url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
"url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg",
"title": "Compagnons",
"description": "Photo prise au Lac d'Oô, France"
}
]
}

6
src/routes/+page.svelte
View file

@ -70,7 +70,11 @@
</div>
<div class="flex w-100 justify-center">
{#each hubjson.photos as photo}
<HoverCard picture={photo.url} />
<HoverCard
picture={photo.url}
title={photo.title}
description={photo.description}
/>
{/each}
</div>
</div>