73 lines
1.9 KiB
Svelte
73 lines
1.9 KiB
Svelte
<script>
|
|
import '$lib/css/base.css';
|
|
import '$lib/css/pill.css';
|
|
import '$lib/css/post-min.css';
|
|
|
|
import SvgIcon from '@jamescoyle/svelte-icon';
|
|
import { mdiCalendarRange } from '@mdi/js';
|
|
import anime from 'animejs';
|
|
|
|
export let cover =
|
|
'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
|
|
export let title = 'Title';
|
|
export let date = '01/01/1997';
|
|
|
|
let post_div;
|
|
let title_h1;
|
|
let cursorX = 0;
|
|
let cursorY = 0;
|
|
let updateY = true;
|
|
|
|
function update_gradient(event, div) {
|
|
const rect = div.getBoundingClientRect();
|
|
if (updateY) {
|
|
cursorY = event.clientY - rect.top;
|
|
}
|
|
cursorX = event.clientX - rect.left;
|
|
post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
|
|
}
|
|
|
|
function animateForeground(isEntering, div_back) {
|
|
const targetOpacity = isEntering ? 1 : 0;
|
|
|
|
anime({
|
|
targets: div_back,
|
|
opacity: [1 - targetOpacity, targetOpacity],
|
|
duration: 400,
|
|
easing: 'easeInOutQuad'
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
class="post-min-container"
|
|
on:mousemove={(event) => {
|
|
update_gradient(event, post_div);
|
|
}}
|
|
on:mouseenter={() => {
|
|
animateForeground(true, post_div);
|
|
title_h1.style.textDecoration = 'underline 2px';
|
|
}}
|
|
on:mouseleave={() => {
|
|
animateForeground(false, post_div);
|
|
title_h1.style.textDecoration = '';
|
|
}}
|
|
>
|
|
<div class="post-min">
|
|
<img
|
|
alt="imgcool"
|
|
src={cover}
|
|
on:mouseenter={() => (updateY = false)}
|
|
on:mouseleave={() => (updateY = true)}
|
|
/>
|
|
<h1 bind:this={title_h1}>{title}</h1>
|
|
<div class="pill post-min-pill post-min-end">
|
|
<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
|
|
<span>{date}</span>
|
|
</div>
|
|
</div>
|
|
<div class="post-min-overlay-front" />
|
|
<div class="post-min-overlay-back" bind:this={post_div} />
|
|
</div>
|