90 lines
2.5 KiB
Svelte
90 lines
2.5 KiB
Svelte
<script>
|
|
import "$lib/css/base.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!";
|
|
|
|
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"
|
|
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" 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>
|