diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Image/ParallaxImage.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Image/ParallaxImage.svelte')
| -rw-r--r-- | src/lib/Image/ParallaxImage.svelte | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte index 71453059..48565ce1 100644 --- a/src/lib/Image/ParallaxImage.svelte +++ b/src/lib/Image/ParallaxImage.svelte @@ -1,46 +1,46 @@ <script lang="ts"> - import { cubicOut } from 'svelte/easing'; - import { tweened } from 'svelte/motion'; + 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'; + 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; - const mouse = tweened({ x: 0, y: 0 }, { duration, easing }); + let badgeReference: HTMLImageElement; + const mouse = tweened({ x: 0, y: 0 }, { duration, easing }); - const handleMouseMove = (event: MouseEvent) => { - const boundingRectangle = badgeReference.getBoundingClientRect(); + const handleMouseMove = (event: MouseEvent) => { + const boundingRectangle = badgeReference.getBoundingClientRect(); - if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY }; + if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY }; - $mouse.x += - (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor; - $mouse.y += - (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor; - $mouse.x = Math.max(Math.min($mouse.x, limit), -limit); - $mouse.y = Math.max(Math.min($mouse.y, limit), -limit); - }; + $mouse.x += + (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor; + $mouse.y += + (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor; + $mouse.x = Math.max(Math.min($mouse.x, limit), -limit); + $mouse.y = Math.max(Math.min($mouse.y, limit), -limit); + }; - const handleMouseLeave = () => { - $mouse = { x: 0, y: 0 }; - }; + const handleMouseLeave = () => { + $mouse = { x: 0, y: 0 }; + }; </script> <img - src={source} - bind:this={badgeReference} - style={`transform: perspective(1000px) rotateX(${$mouse.y / 10}deg) rotateY(${ - -$mouse.x / 10 - }deg); border-radius: ${borderRadius}; ${style}`} - alt={alternativeText} - on:mousemove={handleMouseMove} - on:mouseleave={handleMouseLeave} - class={classList} + src={source} + bind:this={badgeReference} + style={`transform: perspective(1000px) rotateX(${$mouse.y / 10}deg) rotateY(${ + -$mouse.x / 10 + }deg); border-radius: ${borderRadius}; ${style}`} + alt={alternativeText} + on:mousemove={handleMouseMove} + on:mouseleave={handleMouseLeave} + class={classList} /> |