diff options
| author | Fuwn <[email protected]> | 2024-04-21 19:51:49 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-21 19:51:49 -0700 |
| commit | eebeaa378d49cc8adb597d00fd05bcc314779888 (patch) | |
| tree | d2862e4f952525280a341e44810c261548a07a3f /src/lib/ParallaxImage.svelte | |
| parent | refactor(TextTransition): move to Layout (diff) | |
| download | due.moe-eebeaa378d49cc8adb597d00fd05bcc314779888.tar.xz due.moe-eebeaa378d49cc8adb597d00fd05bcc314779888.zip | |
refactor(lib): move componenets to modules
Diffstat (limited to 'src/lib/ParallaxImage.svelte')
| -rw-r--r-- | src/lib/ParallaxImage.svelte | 45 |
1 files changed, 0 insertions, 45 deletions
diff --git a/src/lib/ParallaxImage.svelte b/src/lib/ParallaxImage.svelte deleted file mode 100644 index cebbfa2b..00000000 --- a/src/lib/ParallaxImage.svelte +++ /dev/null @@ -1,45 +0,0 @@ -<script lang="ts"> - 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 classes = ''; - export let style = ''; - export const factor = 1.25; - const limit = 300 * 1.75; - - let badgeReference: HTMLImageElement; - const mouse = tweened({ x: 0, y: 0 }, { duration, easing }); - - const handleMouseMove = (event: MouseEvent) => { - const boundingRectangle = badgeReference.getBoundingClientRect(); - - 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); - }; - - 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); ${style}`} - alt={alternativeText} - on:mousemove={handleMouseMove} - on:mouseleave={handleMouseLeave} - class={classes} -/> |