Feat/BOOK-424 campaign banner

Approved-by: Bianca Widstam
2025-10-29 12:47:40 +00:00
parent 377c8886ad
commit 4c10989e8e
29 changed files with 1052 additions and 22 deletions
@@ -0,0 +1,103 @@
+.marqueeText {
+  background-color: var(--marquee-background-color);
+  position: relative;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  &:has(.overflowing) {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 12px;
+      background: linear-gradient(
+        to right,
+        var(--marquee-background-color) 0%,
+        transparent 100%
+      );
+      z-index: 2;
+      pointer-events: none;
+      opacity: 0;
+      animation: leftShadow var(--animation-duration, 8s) linear infinite;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 12px;
+      background: linear-gradient(
+        to left,
+        var(--marquee-background-color) 0%,
+        transparent 100%
+      );
+      z-index: 2;
+      pointer-events: none;
+      opacity: 1;
+      animation: rightShadow var(--animation-duration, 8s) linear infinite;
+    }
+
+    &:has(.overflowing:hover)::before,
+    &:has(.overflowing:hover)::after {
+      animation-play-state: paused;
+    }
+  }
+}
+
+.textWrapper {
+  display: flex;
+  scrollbar-width: none;
+  align-items: center;
+  scroll-behavior: smooth;
+
+  * {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  &.overflowing {
+    animation: autoScrollText var(--animation-duration, 8s) ease-in-out infinite;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+}
+
+@keyframes autoScrollText {
+  0%,
+  15% {
+    transform: translateX(0);
+  }
+  80%,
+  100% {
+    transform: translateX(calc(-1 * var(--scroll-distance, 50px)));
+  }
+}
+
+@keyframes leftShadow {
+  0%,
+  16% {
+    opacity: 0;
+  }
+  17%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes rightShadow {
+  0%,
+  79% {
+    opacity: 1;
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}