aboutsummaryrefslogtreecommitdiff
path: root/src/lib/ParallaxImage.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-04-21 19:51:49 -0700
committerFuwn <[email protected]>2024-04-21 19:51:49 -0700
commiteebeaa378d49cc8adb597d00fd05bcc314779888 (patch)
treed2862e4f952525280a341e44810c261548a07a3f /src/lib/ParallaxImage.svelte
parentrefactor(TextTransition): move to Layout (diff)
downloaddue.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.svelte45
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}
-/>