Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

古早古早以前,HTML 有一個標籤 <marquee> 可以製作跑馬燈,但因為靈活性不夠,且該標籤一直未被納入規範,所以現在算是絕跡了吧 XD

但總是會有類似的跑馬燈需求,所以今天想分享的是,怎麼用 CSS 製作一個垂直滾動的跑馬燈,話不多說,先上範例:


程式碼

首先,我們需要一個包含多個圖片的容器,並給這個容器添加一些樣式,讓它可以顯示出跑馬燈的效果。以下為範例:

<div class="marquee">
  <div class="marquee--group">
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
  </div>
  <div aria-hidden="true" class="marquee--group">
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
    <img src="/login/marquee.png" />
  </div>
</div>
  • .marquee:跑馬燈的容器
  • .marquee--group:包含圖片的子容器。

接著,在 CSS 中定義跑馬燈的樣式,包括圖片的排列方式、滾動速度等:

:root {
  --gap: 125px;
  --duration: 5s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  flex-direction: column;
}

.marquee--group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  flex-direction: column;
  animation: scroll-y var(--duration) linear infinite;
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

這邊用到了 CSS 變數,包含

  • --gap:圖片之間的距離
  • --duration:滾動的時間
  • --scroll-start, --scroll-end :滾動的起點和終點。

程式碼流程

  • .marquee 的 display 屬性設置為 flex,並且使用了 overflow: hidden 隱藏了超出容器範圍的內容。
  • .marquee--group 則使用了 display: flex,讓圖片可以水平排列,並且使用了 justify-content: space-around 和 align-items: center 居中對齊。
  • 使用 animation 屬性設定滾動的動畫效果。

可能會有的問題

aria-hidden="true" 是什麼意思?為什麼在這裡要使用它?

aria-hidden 是 HTML 中的一個屬性,用於指定元素是否對螢幕閱讀器可見。當 aria-hidden 設置為 true 時,該元素將被隱藏,但是可以通過 CSS 或 JavaScript 顯示出來。

在這個例子中,我們使用了 aria-hidden="true" 將第二個 .marquee--group 元素隱藏起來,因為它是用來實現跑馬燈無縫滾動的。如果不隱藏該元素,則會在跑馬燈滾動時出現空白區域,影響美觀和使用體驗。

為什麼要寫 --scroll-end: calc(-100% - var(--gap)); ,他的作用是什麼?會對動畫產生什麼影響?

使用了 calc(-100% - var(--gap)) 計算出一個負值,表示滾動的終點為「最後一張圖片的下方」。

簡單來說,-100% 表示滾動到容器的底部,而 var(--gap) 則表示再向下移動 gap(圖片之間)的距離,以避免圖片重疊或者間隔過大。--scroll-end 的作用是確保跑馬燈在滾動時可以無縫地循環播放。

如果需要調整滾動速度或者間隔距離,只需要修改相應的 CSS 變數即可。

歡迎給我點鼓勵,讓我知道你來過 :)

12
Subscribe
Notify of
guest

1 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
FFacy
10 months ago

我來了!實用,已收藏 ^^