在 Webflow 中實作懸停暫停的無限橫向捲動

實作步驟

1. 元素結構

確保元素結構如下：

2. 設定 CSS 變數

在 Webflow Designer 中設定 CSS 變數。

1. 給 Section 元素設定 overflow: hidden 和 width: 100vw。
2. 給 Wrapper 元素設定 display: flex 和 justify-content: flex-start。
3. 給 List 元素設定 flex-shrink: 0，並依需要調整版面配置。

3. 設定 Item 元素樣式

4. 加入自訂 CSS 程式碼

在 body 標籤之前或 section 元素之前加入以下自訂 CSS 程式碼，即可在 Webflow 中實作無限橫向捲動效果：

<style>
  .list {
    will-change: transform;
    animation: list-horizontal-scroll 20s linear infinite;
  }
  @keyframes list-horizontal-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - 32px));
    }
  }
  .wrapper:hover .list {
    animation-play-state: paused;
  }
</style>

依需要調整類別名稱 list、list-horizontal-scroll 和 wrapper。把 transform: translateX(calc(-100% - 32px)); 中的 32px 改成與你的清單間距一致的值。

5. 延長 List 元素

如果你的 List 元素太短、無法鋪滿螢幕，可以多複製幾份來填滿螢幕。