Including module: svelte-parallax

package-lock.json

@@ -10,6 +10,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.1",
         "svelte": "^4.2.8",
+        "svelte-parallax": "^0.6.0",
         "vite": "^5.0.8"
       }
     },
@@ -794,6 +795,12 @@
         "@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",
@@ -993,6 +1000,15 @@
         "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,6 +11,7 @@
   "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,11 +4,9 @@
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
 </script>
 
-<main style="overflow: hidden; height: 100vh;">
+<main style="overflow-x: hidden; overflow-y:scroll; height: 100vh;">
   <ScrollTextComponent />
-  <div style="background-color: black; height: 100px; width: 100%;">
-
-  </div>
+  <div style="background-color: black; height: 200px; width: 100%;"></div>
 </main>
 
 <style>

src/app.css

@@ -17,3 +17,20 @@ 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 = 10;
+    let chunks: number = 3;
 
 
 
@@ -11,13 +11,27 @@
         const divElement = document.getElementById('scrollContainer');
         scrollPosition = divElement.scrollTop;
 
+        let currectChunk: number = scrollPosition / chunkSize;
         let chunkProgress: number = scrollPosition % chunkSize;
-        if (chunkSize * 0.1 < chunkProgress 
-        && chunkProgress < chunkSize * 0.9){
+        
+        let typingIndex: number = (Math.ceil(currectChunk));
+
+        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>
@@ -27,7 +41,7 @@
         width: 100%;    
         height: 100vh;
         overflow-y: scroll;
-        z-index: 1;
+        z-index: 0;
     }
 
     .scrollText {
@@ -35,7 +49,7 @@
         background-color: darkslateblue;
         padding: 0;
         margin: 0;
-        z-index: 1;
+        z-index: 0;
     }
 
     .center-screen {
@@ -44,26 +58,43 @@
         justify-content: center;
         width: 50px;
         height: 100vh;
-        position:relative;
+        position:absolute;
         left:0;
         right:0;
         top: 0;
         bottom: 0;
         margin:auto;
-        z-index: 1;
+        z-index: 0;
+    }
+
+    .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: 40vh;">
-    <div class="center-screen">
-        =================================================
+<div style="height: 100vh;">
+    <div class="center-screen big-text no-wrap no-interact">
+        We are 
     </div>
 
     <div class="container" id="scrollContainer" on:scroll={handleScroll}>
         <div class="scrollText" style="height: {allChunkHeight}px;">
             {#each {length: chunks} as _, i}
-                <div class="chunk" style="height: {chunkSize}px; z-index: 0;">
+                <div id="ChunkIndex_{i}" 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>