From 5c06776c0116467f8f464ece983204722bfb928c Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Thu, 4 Jan 2024 10:49:05 +0100
Subject: [PATCH] Added text parallax when scrolling down

---
 .gitignore                       |  2 ++
 src/lib/Universal/ZSpacer.svelte |  6 +++++-
 src/lib/WeAreText.svelte         | 35 +++++++++++++++++++-------------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..62e0ad7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+temp
\ No newline at end of file
diff --git a/src/lib/Universal/ZSpacer.svelte b/src/lib/Universal/ZSpacer.svelte
index 81bc7df..8da9ad3 100644
--- a/src/lib/Universal/ZSpacer.svelte
+++ b/src/lib/Universal/ZSpacer.svelte
@@ -1,2 +1,6 @@
 <!-- Short hand for spacing between components-->
-<div style="flex-grow: 1;"/>
\ No newline at end of file
+<div style="flex-grow: 1; {style}"/>
+
+<script>
+    export let style = "";
+</script>
\ No newline at end of file
diff --git a/src/lib/WeAreText.svelte b/src/lib/WeAreText.svelte
index 47e3bdc..e7bbfbf 100644
--- a/src/lib/WeAreText.svelte
+++ b/src/lib/WeAreText.svelte
@@ -5,16 +5,25 @@
     let startExit = 4700;
     let exitLength = 2000;
     let exitScreenLength = 700;
+    let textMaxRotation = 30;
+    let parallaxOffset = 1.0125;
 
     // Define, don't touch
     let scrollPos: number = 0;
     let extraPosY = 0;
     let rotation = 0;
+    
+    // Define: Parallax text
+    let extraPosY2 = 0;
+    let rotation2 = 0;
 
     $:{
         let time = (scrollPos - startExit) / exitLength;
         extraPosY = lerp(0, -exitScreenLength, time, true);
-        rotation = lerp(0, 50, time, true);
+        rotation = lerp(0, textMaxRotation, time, true);
+
+        extraPosY2 = lerp(0, -exitScreenLength, time * parallaxOffset, true);
+        rotation2 = lerp(0, textMaxRotation, time, true);
     }
 
     function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
@@ -35,15 +44,17 @@
 <svelte:window bind:scrollY={scrollPos} />
 
 <div class="horizontal">
-    <div id="WeAreHolder" style="margin-right: 45vw;">
-        <div style="transform: translate(0, {extraPosY}px) rotateX({rotation}deg);">    
-            <div class="no-wrap no-interact big-text align-center"
-            style="padding: -10px 10px 0px 10px;">
-                We are
-            </div>
+    <div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
+        <div class="no-wrap no-interact big-text align-center WeAreText"
+        style="color: #c9c9c9; transform: translate(0, {extraPosY}px) rotateX({rotation}deg); position: absolute;">
+            We are
+        </div>
+        <div class="no-wrap no-interact big-text align-center WeAreText"
+        style="color: #ffffff; transform: translate(0, {extraPosY2}px) rotateX({rotation2}deg); position: absolute;">
+            We are
         </div>
     </div>
-    <ZSpacer/>
+    <ZSpacer style="width: 10vw;"/>
 </div>
 
 <style>
@@ -55,11 +66,7 @@
     -moz-perspective: 1000px;
 }
 
-#WeAreHolder div>div {
-    padding: 0px 30px -5px 30px;
-    /* border-radius: 40px; */
-    /* background: rgba(57, 57, 57, 0.201); */
-    /* border-bottom: 5px solid rgb(189, 189, 189); */
-
+.WeAreText {
+    padding: -10px 10px 0px 10px;
 }
 </style>
\ No newline at end of file