marquee fix

wheattoast11 · Nov 21, 2024 · a65ad91 · a65ad91
1 parent 71031ef
commit a65ad91
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -16,26 +16,22 @@ function Home({ onMount }) {
 
       <div className="platforms-marquee">
         <div className="platforms-track">
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
+            {/* First set */}
+            <span className="platform-name platform-terminals">terminals</span>
+            <span className="platform-name platform-radical">radical</span>
+            <span className="platform-name platform-pathfinder">pathfinder</span>
+            <span className="platform-name platform-wuji">wuji</span>
+            <span className="platform-name platform-boom">boom</span>
+            <span className="platform-name platform-journey">journey</span>
+            {/* Duplicate set for seamless loop */}
+            <span className="platform-name platform-terminals">terminals</span>
+            <span className="platform-name platform-radical">radical</span>
+            <span className="platform-name platform-pathfinder">pathfinder</span>
+            <span className="platform-name platform-wuji">wuji</span>
+            <span className="platform-name platform-boom">boom</span>
+            <span className="platform-name platform-journey">journey</span>
         </div>
-      </div>
+    </div>
 
       <section className="section">
         <h2>Our Vision</h2>

diff --git a/style.css b/style.css
@@ -178,6 +178,8 @@ h2::before {
     animation: scroll 30s linear infinite;
     white-space: nowrap;
     will-change: transform;
+    width: fit-content;
+    padding-left: 4rem;
     -webkit-mask-image: linear-gradient(
         to right,
         transparent 0%,
@@ -201,6 +203,7 @@ h2::before {
     cursor: pointer;
     padding: 0.5rem 2rem;
     position: relative;
+    display: inline-block;
 }
 
 .platform-name:hover {
@@ -259,7 +262,7 @@ h2::before {
         transform: translateX(0);
     }
     100% {
-        transform: translateX(-100%);
+        transform: translateX(calc(-50% - 2rem));
     }
 }