使用 CSS 和 JavaScript 建立互動式時間軸

2023/11/17

重點

使用 CSS 和 JavaScript 可以輕鬆建立強大的時間軸。
首先概述時間軸的 HTML 結構並使用 CSS 設計時間軸元素的樣式。
繼續使用 JavaScript 將動畫加入時間軸。您可以使用 Intersection Observer API 在捲動時淡入時間軸項目。

時間軸是強大的視覺工具，可以幫助使用者導航和理解按時間順序排列的事件。探索如何使用 CSS 和 JavaScript 的動態組合來建立互動式時間軸。

建構時間軸結構

首先，在index.html中概述 HTML 結構。將事件和日期建立為單獨的元件，為互動式時間軸奠定基礎。

<body> <section class="timeline-section"> <div class="container"> <div class="Timeline__header"> <h2>Timeline</h2> <p class="heading--title"> Here is the breakdown of the time we anticipate <br /> using for the upcoming event. </p> </div> <div class="Timeline__content"> <div class="Timeline__item"> <div class="Timeline__text"> <h3>Occasion 1</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo. </p> <span class="circle">1</span> </div> <h3 class="Timeline__date">12 Dec. 2023</h3> </div> <div class="Timeline__item"> <div class="Timeline__text"> <h3>Occasion 2</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo. </p> <span class="circle">2</span> </div> <h3 class="Timeline__date">12 Dec. 2023</h3> </div>  </div> </div> </section></body>

目前，您的組件如下所示：

為您的時間軸選擇佈局：垂直與水平

設計互動式時間軸時，您可以選擇垂直或水平樣式。垂直時間軸很容易使用，尤其是在手機上，因為這是網站滾動的典型方向。如果您的時間軸有很多內容，這可能是最方便的佈局。

然而，水平時間線在寬螢幕上很有吸引力，並且非常適合細節較少的創意網站，可以最大限度地減少左右滾動。每種風格都有其優點，適合不同類型的網站和使用者體驗。

使用 CSS 設定時間軸樣式

您將為時間軸設計三種類型的視覺元素：線條、節點和日期標記。

Lines：使用 Timeline__content::after 偽元素建立的中心垂直線，作為時間線的主幹。它具有特定的寬度和顏色，位置絕對與時間軸項目的中心對齊。 .Timeline__content::after { background-color: var(--clr-purple); content: ""; position: absolute; left: calc(50% - 2px); width: 0.4rem; height: 97%; z-index: -5;}
節點：使用 Circle 類別設定樣式的圓圈，充當時間軸上的節點。它們絕對位於每個時間軸項目的中心，並且在視覺上與背景顏色不同，形成時間線上的關鍵點。 .circle { position: absolute; background: var(--clr-purple); top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 6.8rem; width: 100%; aspect-ratio: 1/ 1; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 3; font-size: 1.6rem;}
日期標記：使用 Timeline__date 類別設定樣式的日期顯示在時間軸的兩側。它們的位置在每個時間軸項目的左右之間交替，從而沿著時間線創建交錯、平衡的外觀。 .Timeline__text,.Timeline__date { width: 50%; }.Timeline__item:nth-child(even) { flex-direction: row-reverse;}.Timeline_item:nth-child(even) .Timeline_date { text-align: right; padding-right: 8.3rem;}.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}.Timeline_item:nth-child(odd) .Timeline_text { text-align: right; align-items: flex-end; padding-right: 8.3rem;}.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}

從GitHub 儲存庫的style.css中查看完整的樣式集。

樣式化後，您的組件應如下所示：

使用 JavaScript 製作動畫

若要為該元件設定動畫，請使用Intersection Observer API為捲動時的時間軸項目設定動畫。將以下程式碼加入script.js。

1. 初始設定

首先，選擇類別為 Timeline__item 的所有元素。

const timelineItems = document.querySelectorAll(".Timeline__item");

2. 時間軸項目的初始樣式

將每個項目的初始不透明度設為 0（不可見）並應用CSS 過渡以實現平滑淡入淡出。

timelineItems.forEach((item) => { item.style.opacity = 0; item.style.transition = "opacity 0.6s ease-out";}

您可以在樣式表中設定這些樣式，但這樣做會很危險。如果 JavaScript 無法運行，這種方法會讓你的時間軸不可見！在 JavaScript 檔案中隔離這種行為是漸進增強的一個很好的例子。

3.路口觀察者回調

定義 fadeInOnScroll 函數，以在項目與視窗相交時將項目的不透明度變更為 1（可見）。

const fadeInOnScroll = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } });};

4. 交叉口觀察選項

設定觀察者的選項，閾值為 0.1，表示當項目的 10% 可見時觸發動畫。

const options = { root: null, rootMargin: "0px", threshold: 0.1,}

5. 建立和使用交叉口觀察器

最後使用這些選項建立一個 IntersectionObserver 並將其套用到每個時間軸項目。

const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => { observer.observe(item);});

最終結果應如下所示：

時間軸組件最佳實踐

需要遵守的一些做法包括：

針對不同螢幕尺寸最佳化您的時間軸。學習響應式設計技術，以確保跨裝置的無縫使用者體驗。
使用高效的編碼實踐來確保流暢的動畫。
使用語義 HTML、適當的對比度和 ARIA 標籤以獲得更好的可訪問性。

將您的時間表變為現實：網頁設計之旅

建立互動式時間軸不僅僅是呈現資訊；更是這是為了創造一種引人入勝且資訊豐富的體驗。透過結合 HTML 結構、CSS 樣式和 JavaScript 動畫，您可以製作一個時間軸來吸引觀眾，同時提供有價值的內容。

重點