Setup basics

src/App.svelte

@@ -2,9 +2,12 @@
   import WeAreText from './lib/WeAreText.svelte'
   import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
   import { onMount } from "svelte";
+  import ZSpacer from './lib/Universal/ZSpacer.svelte';
+  import planeImg from './images/PlaneGrid.png';
 
   window.onload = function() {
-    window.scrollTo(0, 100);
+    //window.scrollTo(0, 100);
+    window.scrollTo(0, 5500); // Debug
   }
 
   // Auto assigned fields (Will change after load)
@@ -14,10 +17,11 @@
   const handleProgress = (progress) => {
     parallaxProgress = progress;
   };
-
-
+  
   function debugClick(){
   }
+
+  let weAreTexts: string[] = ['overlooked', 'underfunded', 'constrained', 'depleated'];
 </script>
 
 <svelte:window bind:scrollY={scrollPos} />
@@ -35,28 +39,43 @@
     sections={10}
     config={{stiffness: 0.2, damping: 0.3}}
     >
-    <ParallaxLayer rate={0} span={3} style="background-color: grey;" />
+    <ParallaxLayer rate={0} span={10} style="background: url('{planeImg}'); filter: brightness(10%);" />
 
-    <StickyLayer offset={{ top: 0, bottom: 10 }}>
+    <StickyLayer offset={{ top: 0, bottom: 10 }} style="z-index: 1000;">
       <div>
         {scrollPos}
       </div>
       <button on:click={debugClick}>Debug button</button>
     </StickyLayer>
 
-    <StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
-      <WeAreText/>
-    </StickyLayer>
+    {#each weAreTexts as text, i}
+    {@const stickyOffset = 0.65}
+    {@const stickyInterval = 1}
+    {@const stickyDuration = 0.5}
 
-    <StickyLayer class="no-interact" offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
-      <div class="align-center" style="font-size: 100px; padding-top: 200px;">
+    <StickyLayer class="align-center" rate={-1} offset={{ top: stickyInterval * i + stickyOffset, bottom: stickyInterval * i + stickyDuration + stickyOffset}}>
+      <div class="stickyText" style="margin-top: 1vw;">
+        {text}
+      </div>
+    </StickyLayer>
+    {/each}
+
+    <StickyLayer offset={{ top: 5.5, bottom: 5.5 }} style="background-color: #242424;">
+      <div class="align-center stickyText" style="font-size: 9vw; padding-top: 200px;">
         The deprived devs
       </div>
     </StickyLayer>
+
+    <StickyLayer class="align-center" offset={{ top: 0, bottom: 5.125 }}>
+      <WeAreText/>
+    </StickyLayer>
   </Parallax>
 </main>
 
 <style>
-  
+  .stickyText {
+    font-family: CozetteVector;
+    font-size: 5vw;
+  }
 </style>
 

src/app.css

@@ -18,23 +18,6 @@ body {
   margin: 0;
 }
 
-.typewriter h1 {
-  overflow: hidden; /* Ensures the content is not revealed until the animation */
-  border-right: .15em solid orange; /* The typwriter cursor */
-  white-space: nowrap; /* Keeps the content on a single line */
-  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
-  letter-spacing: .15em; /* Adjust as needed */
-  animation: 
-    typing 3.5s steps(40, end),
-    blink-caret .75s step-end infinite;
-}
-
-/* The typing effect */
-@keyframes typing {
-  from { width: 0 }
-  to { width: 100% }
-}
-
 /* Add a black background color to the top navigation */
 .topnav {
   background-color: #333;
@@ -68,10 +51,6 @@ body {
   justify-content: flex-start;
 }
 
-.big-text {
-  font-size: 125px;
-}
-
 .no-wrap {
   text-wrap: nowrap;
   white-space: nowrap;
@@ -81,10 +60,37 @@ body {
   pointer-events: none;
 }
 
+.yes-interact {
+  pointer-events: all;
+}
+
 .hide{
   visibility: hidden;
 }
 
+.parallax-layer {
+  pointer-events: none;
+}
+
+.parallax-layer * {
+  pointer-events: all;
+}
+
+.sticky-layer {
+  pointer-events: none;
+}
+
+.sticky-layer * {
+  pointer-events: all;
+}
+
+@font-face {
+  font-family: 'CozetteVector';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./static/CozetteVector.ttf') format('truetype');
+}
+
 /* ================================================ */
 /* Aligning */
 /* ================================================ */
@@ -92,6 +98,7 @@ body {
   align-content: center;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   display: flex;
   text-align: center;
   vertical-align: middle;

src/lib/WeAreText.svelte

@@ -2,26 +2,21 @@
     import ZSpacer from "./Universal/ZSpacer.svelte";
 </script>
 
-<div class="horizontal">
-    <div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
-        <div class="no-wrap no-interact big-text align-center WeAreText"
+<div>
+    <div class="align-center" style="margin-right: 35vw; position: relative;">
+        <div id="WeAreText" class="no-wrap no-interact"
         style="color: #ffffff; position: absolute;">
             We are
         </div>
     </div>
-    <ZSpacer style="width: 10vw;"/>
 </div>
 
 <style>
-#WeAreHolder {
-    transition: transform 1s cubic-bezier(0,1.32,0,.92);
-    transform-style: preserve-3d;
+    #WeAreText {
+        font-family: 'CozetteVector';
+        font-size: 7.5vw;
+        text-align: end;
 
-    perspective: 1000px;
-    -moz-perspective: 1000px;
-}
-
-.WeAreText {
-    padding: -10px 10px 0px 10px;
-}
+        margin-right: 15vw;
+    }
 </style>