MORE FANCY (MOUSE BITES)
This commit is contained in:
parent
0343eed4be
commit
315b7576b4
2 changed files with 13 additions and 3 deletions
|
@ -12,7 +12,7 @@
|
||||||
<div class="my-auto w-5 h-5 font-bold">
|
<div class="my-auto w-5 h-5 font-bold">
|
||||||
<Eye></Eye>
|
<Eye></Eye>
|
||||||
</div>
|
</div>
|
||||||
<p>This page has been viewed <span class="font-bold">100</span> times.</p>
|
<p>This page has been viewed <span class="font-bold">x</span> times.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col my-auto ml-auto text-sm text-neutral-500">
|
<div class="flex flex-col my-auto ml-auto text-sm text-neutral-500">
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
/** @type {string} src */
|
/** @type {string} src */
|
||||||
export let src;
|
export let src;
|
||||||
|
@ -10,6 +11,8 @@
|
||||||
/** @type {HTMLImageElement} e */
|
/** @type {HTMLImageElement} e */
|
||||||
let e;
|
let e;
|
||||||
|
|
||||||
|
let loaded = false;
|
||||||
|
|
||||||
// https://github.com/nbitzz/newnewwebsite/blob/a751e690a9993923aabd1984d9645c502f148c69/src/components/buttons/Buttons.astro#L74-L95
|
// https://github.com/nbitzz/newnewwebsite/blob/a751e690a9993923aabd1984d9645c502f148c69/src/components/buttons/Buttons.astro#L74-L95
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
/** @param {MouseEvent} ev */
|
/** @param {MouseEvent} ev */
|
||||||
|
@ -21,7 +24,7 @@
|
||||||
` rotate3d(${yP.toFixed(2)}, ${xP.toFixed(2)},0,20deg)` +
|
` rotate3d(${yP.toFixed(2)}, ${xP.toFixed(2)},0,20deg)` +
|
||||||
` translate(${3 * xP}px,${-5 * yP}px)`;
|
` translate(${3 * xP}px,${-5 * yP}px)`;
|
||||||
|
|
||||||
e.style.boxShadow = 'gray 0px 0px 10px';
|
e.style.boxShadow = `${(-3 * xP).toFixed(2)}px ${(5 * yP).toFixed(2)}px 3px #c4bef3`;
|
||||||
};
|
};
|
||||||
|
|
||||||
e.addEventListener('mouseover', startEffect);
|
e.addEventListener('mouseover', startEffect);
|
||||||
|
@ -30,11 +33,16 @@
|
||||||
e.style.transform = '';
|
e.style.transform = '';
|
||||||
e.style.boxShadow = '';
|
e.style.boxShadow = '';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const preload = new Image();
|
||||||
|
preload.src = src;
|
||||||
|
preload.onload = () => (loaded = true);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a class="hover:shadow-2xl" {href} target="_blank">
|
<a class="hover:shadow-2xl" {href} target="_blank">
|
||||||
<img class="imgbutton" {src} alt="Button" bind:this={e} />
|
<img in:fade class="imgbutton {!loaded && 'hidden'}" {src} alt="Button" bind:this={e} />
|
||||||
|
<div class="animate-pulse imgbutton bg-neutral-600/50 rounded-sm {loaded && 'hidden'}"></div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
@ -42,5 +50,7 @@
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition-duration: 70ms;
|
transition-duration: 70ms;
|
||||||
|
height: 31px;
|
||||||
|
width: 88px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue