82 lines
2.2 KiB
Svelte
82 lines
2.2 KiB
Svelte
<script>
|
|
import "$lib/css/base.css";
|
|
import "$lib/css/link.css";
|
|
import { hexTorgb, darkenHexTorgb } from "$lib/ts/color.ts";
|
|
|
|
import SvgIcon from "$lib/components/svg-icon-custom.svelte";
|
|
import { mdiChevronRight } from "@mdi/js";
|
|
import anime from "animejs";
|
|
|
|
let color = "9A031E";
|
|
const color_rgb = hexTorgb(color);
|
|
const color_darken = darkenHexTorgb(color, 0.8);
|
|
let imgBase = "placeholder_link.png";
|
|
let imgHover = "placeholder_link_hover.png";
|
|
let base;
|
|
let hover;
|
|
|
|
let span_link;
|
|
let svg_icon;
|
|
let div_background;
|
|
let span_width = "0%";
|
|
|
|
async function enter() {
|
|
span_width = "100%";
|
|
span_link.style.color = "var(--color-background)";
|
|
svg_icon.svgElement.style.color = "var(--color-background)";
|
|
svg_icon.svgElement.style.transform = "translateX(8px)";
|
|
updatePicture(false, base);
|
|
updatePicture(true, hover);
|
|
updatePicture(true, div_background);
|
|
}
|
|
|
|
async function leave() {
|
|
span_width = "0%";
|
|
span_link.style.color = "var(--color-text)";
|
|
svg_icon.svgElement.style.color = "var(--color-text)";
|
|
svg_icon.svgElement.style.transform = "";
|
|
updatePicture(true, base);
|
|
updatePicture(false, hover);
|
|
updatePicture(false, div_background);
|
|
}
|
|
|
|
function updatePicture(show, img) {
|
|
const targetOpacity = show ? 1 : 0;
|
|
|
|
anime({
|
|
targets: img,
|
|
opacity: [1 - targetOpacity, targetOpacity],
|
|
duration: 400,
|
|
easing: "easeInOutQuad",
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
style="--shadow: rgba({color_rgb.r}, {color_rgb.g}, {color_rgb.b}, 0.4) 0px 30px 60px -12px, rgba({color_darken.r}, {color_darken.g}, {color_darken.b}, 0.3) 0px 18px 36px -18px; --gradient: linear-gradient(180deg, #{color} 0%, rgba({color_darken.r},{color_darken.g}, {color_darken.b}, 1) 100%); --span-width: {span_width};"
|
|
class="link-container"
|
|
on:mouseenter={enter}
|
|
on:mouseleave={leave}
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div class="link-background" bind:this={div_background}></div>
|
|
<div class="link-content flex-row center">
|
|
<div class="link-img">
|
|
<img bind:this={base} alt="base" src={imgBase} />
|
|
<img
|
|
bind:this={hover}
|
|
alt="hover"
|
|
class="link-img-hover"
|
|
src={imgHover}
|
|
/>
|
|
</div>
|
|
<span bind:this={span_link}>Link</span>
|
|
<SvgIcon
|
|
type="mdi"
|
|
path={mdiChevronRight}
|
|
size={80}
|
|
bind:this={svg_icon}
|
|
></SvgIcon>
|
|
</div>
|
|
</div>
|