package-lock.json

@@ -10,7 +10,6 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.1",
         "svelte": "^4.2.8",
-        "svelte-parallax": "^0.6.0",
         "vite": "^5.0.8"
       }
     },
@@ -795,12 +794,6 @@
         "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/focus-options-polyfill": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/focus-options-polyfill/-/focus-options-polyfill-1.6.0.tgz",
-      "integrity": "sha512-uyrAmLZrPnUItQY5wTdg31TO9GGZRGsh/jmohUg9oLmLi/sw5y7LlTV/mwyd6rvbxIOGwmRiv6LcTS8w7Bk9NQ==",
-      "dev": true
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1000,15 +993,6 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
-    "node_modules/svelte-parallax": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/svelte-parallax/-/svelte-parallax-0.6.0.tgz",
-      "integrity": "sha512-W2dGPNmK274AmL8Ibzr96luh24jr3u2MfAmAJTpnhAZwxkRws5MKgCxfxBBPvpRUc2GpGGIGanhTYXoHV6DcBw==",
-      "dev": true,
-      "dependencies": {
-        "focus-options-polyfill": "^1.6.0"
-      }
-    },
     "node_modules/vite": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",

package.json

@@ -11,7 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "svelte": "^4.2.8",
-    "svelte-parallax": "^0.6.0",
     "vite": "^5.0.8"
   }
 }

src/App.svelte

@@ -4,9 +4,11 @@
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
 </script>
 
-<main style="overflow-x: hidden; overflow-y:scroll; height: 100vh;">
+<main style="overflow: hidden; height: 100vh;">
   <ScrollTextComponent />
-  <div style="background-color: black; height: 200px; width: 100%;"></div>
+  <div style="background-color: black; height: 100px; width: 100%;">
+
+  </div>
 </main>
 
 <style>

src/app.css

@@ -17,20 +17,3 @@ body {
   padding: 0;
   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% }
-}

src/lib/ScrollTextComponent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     let chunkSize: number = 750;
-    let chunks: number = 3;
+    let chunks: number = 10;
 
 
 
@@ -11,27 +11,13 @@
         const divElement = document.getElementById('scrollContainer');
         scrollPosition = divElement.scrollTop;
 
-        let currectChunk: number = scrollPosition / chunkSize;
         let chunkProgress: number = scrollPosition % chunkSize;
-        
+        if (chunkSize * 0.1 < chunkProgress 
-        let typingIndex: number = (Math.ceil(currectChunk));
+        && chunkProgress < chunkSize * 0.9){
-
-        if (chunkSize * 0.2 < chunkProgress 
-        && chunkProgress < chunkSize * 0.65){
             divElement.style.color = "pink";
-            document.getElementById('TypingIndex_' + typingIndex).classList.add('typewriter');
         }
         else{
             divElement.style.color = "lightblue";
-            document.getElementById('TypingIndex_' + typingIndex).classList.remove('typewriter');
-        }
-
-        console.log(scrollPosition + ">" + (allChunkHeight - chunkSize - 150));
-        if (scrollPosition > allChunkHeight - chunkSize - 150){
-            document.getElementById('scrollContainer').classList.add('no-interact');
-        }
-        else{
-            document.getElementById('scrollContainer').classList.remove('no-interact');
         }
     }
 </script>
@@ -41,7 +27,7 @@
         width: 100%;    
         height: 100vh;
         overflow-y: scroll;
-        z-index: 0;
+        z-index: 1;
     }
 
     .scrollText {
@@ -49,7 +35,7 @@
         background-color: darkslateblue;
         padding: 0;
         margin: 0;
-        z-index: 0;
+        z-index: 1;
     }
 
     .center-screen {
@@ -58,43 +44,26 @@
         justify-content: center;
         width: 50px;
         height: 100vh;
-        position:absolute;
+        position:relative;
         left:0;
         right:0;
         top: 0;
         bottom: 0;
         margin:auto;
-        z-index: 0;
+        z-index: 1;
-    }
-
-    .big-text {
-        font-size: 100px;
-        pointer-events: none;
-    }
-
-    .no-wrap {
-        text-wrap: nowrap;
-        white-space: nowrap;
-    }
-
-    .no-interact {
-        pointer-events: none;
     }
 </style>
 
-<div style="height: 100vh;">
+<div style="height: 40vh;">
-    <div class="center-screen big-text no-wrap no-interact">
+    <div class="center-screen">
-        We are 
+        =================================================
     </div>
 
     <div class="container" id="scrollContainer" on:scroll={handleScroll}>
         <div class="scrollText" style="height: {allChunkHeight}px;">
             {#each {length: chunks} as _, i}
-                <div id="ChunkIndex_{i}" class="chunk" style="height: {chunkSize}px; z-index: 0;">
+                <div class="chunk" style="height: {chunkSize}px; z-index: 0;">
                     {scrollPosition}
-                    <div id="TypingIndex_{i}">
-                        <h1>{i} The cat and the hat.</h1>
-                    </div>
                 </div>
             {/each}
         </div>