From 3392a4fce9a674a9d5de1e3bc55a43c00dd986c2 Mon Sep 17 00:00:00 2001
From: Viral Parmar <viralparmarme@gmail.com>
Date: Fri, 17 Feb 2023 22:34:26 +0530
Subject: [PATCH] Marquee switchup

---
 index.html | 15 +++++++--------
 style.css  | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index b34a154..9379c1b 100644
--- a/index.html
+++ b/index.html
@@ -42,14 +42,13 @@ <h5>Part-time Music Producer</h5><br>
                     <h5>AI and Startup Enthusiast</h5><br>
                 </div>
                 <div class="moving-text animate__animated animate__fadeIn animate__slower animate__delay-1s">
-                    <marquee behavior="alternate" direction="left">
-                        <h3>
-                            Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
-                            Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
-                            Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
-                            Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
-                        </h3>
-                    </marquee>
+                    <div class="marquee">
+                        <div class="marquee__inner" aria-hidden="true">
+                            <h3>
+                                Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar
+                            </h3>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/style.css b/style.css
index 2a024b5..9b29c3d 100644
--- a/style.css
+++ b/style.css
@@ -130,4 +130,36 @@ td {
         font-size: 2em;
     }
 
+}
+
+.marquee {
+    position: relative;
+    overflow: hidden;
+    --offset: 20vw;
+    --move-initial: calc(-10% + var(--offset));
+    --move-final: calc(-40% + var(--offset));
+}
+
+.marquee__inner {
+    width: fit-content;
+    display: flex;
+    position: relative;
+    transform: translate3d(var(--move-initial), 0, 0);
+    animation: marquee 5s alternate infinite;
+    animation-play-state: running;
+}
+
+.marquee span {
+    font-size: 10vw;
+    padding: 0 2vw;
+}
+
+@keyframes marquee {
+    0% {
+        transform: translate3d(var(--move-initial), 0, 0);
+    }
+
+    100% {
+        transform: translate3d(var(--move-final), 0, 0);
+    }
 }
\ No newline at end of file