feat(user): user parallax image

2 files changed, 51 insertions, 5 deletions

diff --git a/src/lib/ParallaxImage.svelte b/src/lib/ParallaxImage.svelte
new file mode 100644
index 00000000..cebbfa2b
--- /dev/null
+++ b/src/lib/ParallaxImage.svelte
@@ -0,0 +1,45 @@
+<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}
+/>
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 446ca952..b0b4ea8a 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ParallaxImage from './../../../lib/ParallaxImage.svelte';
 	import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
 	import { user, type User } from '$lib/Data/AniList/user';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
@@ -105,7 +106,11 @@
 				<div class="card user-grid-content">
 					<div class="user-grid-avatar">
 						<a href={`https://anilist.co/user/${userData.name}`} target="_blank">
-							<img src={userData.avatar.large} alt="" width="100vw" class="avatar" />
+							<ParallaxImage
+								source={userData.avatar.large}
+								alternativeText=""
+								style="border-radius: 8px; width: 6.5em;"
+							/>
 						</a>
 					</div>
 
@@ -279,10 +284,6 @@
 		align-items: center;
 	}
 
-	.avatar {
-		border-radius: 8px;
-	}
-
 	.click-item {
 		margin: 0 0.625rem;
 	}