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>