From a5ce6c2efc42840ac749084c3d9fa476699732af Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Fri, 29 Dec 2023 02:19:40 +0100
Subject: [PATCH] Added typing css animation

---
 src/App.svelte                     |  6 ++--
 src/app.css                        | 17 ++++++++++
 src/lib/ScrollTextComponent.svelte | 53 +++++++++++++++++++++++-------
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index e695b65..92941da 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/app.css b/src/app.css
index 32caac9..8284563 100644
--- a/src/app.css
+++ b/src/app.css
@@ -16,4 +16,21 @@
 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% }
 }
\ No newline at end of file
diff --git a/src/lib/ScrollTextComponent.svelte b/src/lib/ScrollTextComponent.svelte
index 039a453..75a7e2b 100644
--- a/src/lib/ScrollTextComponent.svelte
+++ b/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>