From 03cfd5a6176e8f4fd7710a65a994ba108c9e956e Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sat, 30 Mar 2024 16:04:44 +0100
Subject: [PATCH] Better animated Zhen Site

---
 src/routes/zhen/+page.svelte | 46 ++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/routes/zhen/+page.svelte b/src/routes/zhen/+page.svelte
index 33d4fb9..b5cf54b 100644
--- a/src/routes/zhen/+page.svelte
+++ b/src/routes/zhen/+page.svelte
@@ -1,27 +1,57 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
+
+    // Params
+    let mouseMoveDevider = 1.5;
+
+    // Site variables
     let mouseX = 0;
     let mouseY = 0;
 
+    // Element binded variables
+    let animatedTopBackgroundX = 0;
+    let animatedTopBackgroundY = 0;
+
     let StartPageAnimated: Element;
 
     function handleMouseMove(event: MouseEvent) {
         // Calculate the mouse position relative to the center of the div
         const centerX = StartPageAnimated.clientWidth / 2;
         const centerY = StartPageAnimated.clientHeight / 2;
+
+        mouseX = event.clientX;
+        mouseY = event.clientY;
         
-        mouseX = event.clientX - StartPageAnimated.clientLeft - centerX;
-        mouseY = event.clientY - StartPageAnimated.clientTop - centerY;
+        animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
+        animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;
 
         //console.log(mouseX+"\n"+mouseY);
     }
 
+    // let windowWidth = window.innerWidth;
+    // let windowHeight = window.innerHeight;
 
+    // // Update window dimensions on mount
+    // onMount(() => {
+    //     const updateDimensions = () => {
+    //     windowWidth = window.innerWidth;
+    //     windowHeight = window.innerHeight;
+    //     };
+
+    //     window.addEventListener('resize', updateDimensions);
+
+    //     return () => {
+    //     window.removeEventListener('resize', updateDimensions);
+    //     };
+    // });
 </script>
 
-<div class="StartPageContainer" role="presentation" on:mousemove={handleMouseMove}>
+<svelte:body on:mousemove={handleMouseMove}/>
 
-    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({mouseX}px, {mouseY}px);">
+<div class="StartPageContainer">
 
+    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
+        <span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
     </div>
 </div>
 
@@ -40,5 +70,13 @@
         height: 100vw;
         
         transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);
+
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
     }
 </style>
\ No newline at end of file