Marquee switchup

viralparmarme · Feb 17, 2023 · 3392a4f · 3392a4f
1 parent 1d8edee
commit 3392a4f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git 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
@@ -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);
+    }
 }