Added typing css animation

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>