fix(hover-card): add hover card to the scene

eepson123tw · Oct 5, 2024 · 10b76bc · 10b76bc
1 parent ba80564
commit 10b76bc
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 15 deletions.
diff --git a/fet-trick/canvas/canvas-lyrics-player.html b/fet-trick/canvas/canvas-lyrics-player.html
@@ -61,7 +61,7 @@
 		<canvas id="lyrics-canvas"></canvas>
 	</div>
 
-	<audio src="../public/02.mp3" controls type="audio/ogg" id="audio-player"></audio>
+	<audio src="../../public/02.mp3" controls type="audio/ogg" id="audio-player"></audio>
 	<script>
 		const lyrics = [
 			{ time: 0, text: "(傷心酒店 city pop)" },

diff --git a/fet-trick/js/1.html b/fet-trick/js/1.html
diff --git a/fet-trick/js/mouse-hover-effect.html b/fet-trick/js/mouse-hover-effect.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>MouseHoverEffect</title>
+	<style>
+		*{
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+		html,body{
+			width: 100%;
+			height: 100%;
+			background-color: black;
+			position: relative;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.card{
+			transition: all 0.3s;
+			transform: perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));	
+		}
+		.card:hover{
+			border: 4px solid red;
+			border-radius: 20px;
+		}
+	</style>
+</head>
+<body>
+	<main>
+		<img class="card" draggable="false" src="https://www.deckofcardsapi.com/static/img/KH.png" alt="KH">
+	</main>
+	<script>
+		const card = document.querySelector('.card');
+		const yRange = [-10,10]
+		const getRange = (range,value,length)=>{
+			return (value / length) * (range[1] - range[0]) + range[0];
+		}
+		card.onmousemove = (e)=>{
+			const x = e.offsetX; 
+			const y = e.offsetY;
+			const width = card.offsetWidth;
+			const height = card.offsetHeight;
+
+			const ry = -getRange(yRange,x,width);
+			const rx = getRange(yRange,y,height);
+
+
+			card.style.setProperty('--rx',rx + 'deg');
+			card.style.setProperty('--ry',ry + 'deg');
+		}
+		card.onmouseleave = ()=>{
+			card.style.setProperty('--rx','0deg');
+			card.style.setProperty('--ry','0deg');
+		}
+
+	</script>
+</body>
+</html>
+
diff --git a/src/types/link.ts b/src/types/link.ts
@@ -128,8 +128,8 @@ export const jsGroups: Array<Link> = [
     group: Group.Js,
   },
   {
-    routeName: "1",
-    url: "/js/1",
+    routeName: "mouse-hover-effect",
+    url: "/js/mouse-hover-effect",
     group: Group.Js,
   },
 ];