feat: Added the OverflowMarquee, implemented auto-scrolling text.

2025-12-14 01:04:26 +09:00
parent 5c6b0b0444
commit a7c3b544fa
5 changed files with 174 additions and 6 deletions
@@ -36,6 +36,41 @@
      ::-webkit-scrollbar-thumb:hover {
        background: #6b7280; 
      }
+
+      /* Overflow marquee (auto-scroll when truncated) */
+      .overflow-marquee {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 100%;
+      }
+
+      .overflow-marquee__text {
+        display: inline-block;
+        will-change: transform;
+      }
+
+      .overflow-marquee__text--animate {
+        animation: overflow-marquee-scroll var(--marquee-duration, 6s) linear infinite;
+      }
+
+      @keyframes overflow-marquee-scroll {
+        0%, 12% {
+          transform: translateX(0);
+        }
+        70%, 86% {
+          transform: translateX(calc(var(--marquee-distance, 0px) * -1));
+        }
+        100% {
+          transform: translateX(0);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .overflow-marquee__text--animate {
+          animation: none;
+        }
+      }
    </style>
  <script type="importmap">
 {