[Sync] Starting to use parallex again

src/routes/zhen/Comps/TopAnimatedBackground.svelte

@@ -4,6 +4,8 @@
     import TopNameTextPlate from "./TopNameTextPlate.svelte";
     //import { throttle } from "./../Utils/Throttle";
 
+    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+
     // Params
     let mouseMoveScale: number = 0.25;
     let targetTextLenght: number = 100;
@@ -52,24 +54,32 @@
         windowRef.addEventListener("resize", updateDimensions);
 
         const RevertToOrigin = () => {
-            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
-                StartPageAnimated.classList.add('FirefoxSmoothTranition');
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.add("FirefoxSmoothTranition");
             }
-            updateAnimation(new Vector2(windowWidth/2, windowHeight/2));
+            updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
         };
-        document.documentElement.addEventListener('mouseleave', RevertToOrigin)
+        document.documentElement.addEventListener("mouseleave", RevertToOrigin);
 
         const RemoveFirefoxSmoothTranition = () => {
-            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
-                StartPageAnimated.classList.remove('FirefoxSmoothTranition');
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.remove("FirefoxSmoothTranition");
             }
         };
-        document.documentElement.addEventListener('mouseenter', RemoveFirefoxSmoothTranition)
+        document.documentElement.addEventListener(
+            "mouseenter",
+            RemoveFirefoxSmoothTranition,
+        );
 
         return () => {
             windowRef.removeEventListener("resize", updateDimensions);
         };
-
     });
 
     const programmingLanguages: string[] = [
@@ -81,27 +91,52 @@
         "JAVASCRIPT",
         "TYPESCRIPT",
         "HTML",
-        "CSS"
+        "CSS",
     ];
 
     function getRandomInt(max: number) {
         return Math.floor(Math.random() * max);
     }
 
-    function GrabRandomString(){
+    function GrabRandomString() {
         let outString: string = "";
         while (outString.length < targetTextLenght) {
-            outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " ";
+            outString +=
+                programmingLanguages[
+                    getRandomInt(programmingLanguages.length)
+                ] + " ";
         }
 
         return outString; // At about target size
     }
-
 </script>
 
 <svelte:window on:mousemove={onMouseMoved} />
 
-<div class="StartPageContainer">
+<Parallax sections={2} config={{ stiffness: 0.2, damping: 0.3 }}>
+    <ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
+        <div
+            class="StartPageAnimated"
+            bind:this={StartPageAnimated}
+            style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
+        >
+            {#each { length: 100 } as _, i}
+                <span class="rotate45 SkillsText">
+                    {GrabRandomString()}
+                </span>
+            {/each}
+        </div>
+    </ParallaxLayer>
+
+    <ParallaxLayer rate={0} offset={0.25} span={0}>
+        <TopNameTextPlate />
+    </ParallaxLayer>
+
+    <ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
+    </ParallaxLayer>
+</Parallax>
+
+<!-- <div class="StartPageContainer">
     <div class="TopOverlay">
         <TopNameTextPlate/>
     </div>
@@ -122,13 +157,13 @@
         >
         {/each}
     </div>
-</div>
+</div> -->
 
-<div id="DummyDiv" class="FirefoxSmoothTranition"/>
+<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />
 
 <style>
     .StartPageContainer {
-        height: 40vh;
+        /* height: 40vh; */
 
         background-color: burlywood;
         overflow: hidden;
@@ -153,25 +188,28 @@
         transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
         -moz-transition: none;
 
+        left: -25vw;
+        top: -50vh;
+
         justify-content: center;
         vertical-align: middle;
         display: flex;
     }
 
-    .FirefoxSmoothTranition{
+    .FirefoxSmoothTranition {
         transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
         -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
     }
 
-    .SkillsText{
-        font-family: 'CozetteVector';
+    .SkillsText {
+        font-family: "CozetteVector";
 
         text-align: start;
         font-size: x-large;
-        display: flex; 
-        justify-content: center; 
+        display: flex;
+        justify-content: center;
         align-items: center;
-        white-space:nowrap; 
+        white-space: nowrap;
 
         width: 2rem;