Idea changed but sync

src/App.svelte

@@ -1,12 +1,36 @@
 <script>
   import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
+  import StartVideo from './assets/StartVideo.gif'
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
+  import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
 </script>
 
-<main style="overflow-x: hidden; overflow-y:scroll; height: 100vh;">
-  <ScrollTextComponent />
-  <div style="background-color: black; height: 200px; width: 100%;"></div>
+<main>
+  <div class="topnav">
+    <a class="active" href="#home">Home</a>
+    <a href="#news">News</a>
+    <a href="#contact">Contact</a>
+    <a href="#about">About</a>
+  </div> 
+
+  <!-- <ScrollTextComponent /> -->
+  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+    <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
+  
+    <ParallaxLayer rate={-0.5}>
+      <img src={StartVideo} alt="Start video on main screen"/>
+    </ParallaxLayer>
+  
+    <ParallaxLayer rate={1} offset={1.75}>
+      <img src='bird.jpg' alt='a bird'>
+    </ParallaxLayer>
+  
+    <StickyLayer offset={{ top: 0.5, bottom: 2 }}>
+      <p>A description of a horse and a bird.</p>
+    </StickyLayer>
+  
+    <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
+  </Parallax>
 </main>
 
 <style>