diff options
| author | Fuwn <[email protected]> | 2024-10-28 15:32:46 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-28 15:32:46 -0700 |
| commit | 39b677404558ae3b7eb34e818d7ca308f62f9cb0 (patch) | |
| tree | 7f19fca39ecd4237e3c0d1aef2d8e9fa3cec7845 /src/lib/Image/ParallaxImage.svelte | |
| parent | feat(graphql): paged badges query (diff) | |
| download | due.moe-svelte-5.tar.xz due.moe-svelte-5.zip | |
feat: update to svelte 5svelte-5
Diffstat (limited to 'src/lib/Image/ParallaxImage.svelte')
| -rw-r--r-- | src/lib/Image/ParallaxImage.svelte | 40 |
1 files changed, 27 insertions, 13 deletions
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte index 48565ce1..390b9c92 100644 --- a/src/lib/Image/ParallaxImage.svelte +++ b/src/lib/Image/ParallaxImage.svelte @@ -2,17 +2,31 @@ import { cubicOut } from 'svelte/easing'; import { tweened } from 'svelte/motion'; - export let source: string; - export let duration = 300 * 1.75; - export let easing = cubicOut; - export let alternativeText: string; - export let classList = ''; - export let style = ''; - export let factor = 1.25; - export let limit = 300 * 1.75; - export let borderRadius = '8px'; - - let badgeReference: HTMLImageElement; + interface Props { + source: string; + duration?: any; + easing?: any; + alternativeText: string; + classList?: string; + style?: string; + factor?: number; + limit?: any; + borderRadius?: string; + } + + let { + source, + duration = 300 * 1.75, + easing = cubicOut, + alternativeText, + classList = '', + style = '', + factor = 1.25, + limit = 300 * 1.75, + borderRadius = '8px' + }: Props = $props(); + + let badgeReference: HTMLImageElement = $state(); const mouse = tweened({ x: 0, y: 0 }, { duration, easing }); const handleMouseMove = (event: MouseEvent) => { @@ -40,7 +54,7 @@ -$mouse.x / 10 }deg); border-radius: ${borderRadius}; ${style}`} alt={alternativeText} - on:mousemove={handleMouseMove} - on:mouseleave={handleMouseLeave} + onmousemove={handleMouseMove} + onmouseleave={handleMouseLeave} class={classList} /> |