使用 CSS 和 JavaScript 建立互動式時間軸
要點
使用 CSS 和 JavaScript 可以輕鬆建立引人注目的時間軸。
首先透過建立 HTML 結構來組織事件的時間進程，其中包含標題、段落、圖像和其他多媒體資產等各種元件。此外，利用級聯樣式表 (CSS) 為這些元件賦予美觀屬性，從而製作出具有視覺吸引力的介面，增強使用者在時間軸導航時的體驗。
javascript//為時間軸元素設定交集觀察器const Observer=new IntersectionObserver(entries=> {entries.forEach(entry=> {//如果元素可見，則使用CSS 淡入淡出) if (entry.isIntersecting) {entry. target. classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});//最初為所有時間軸元素加上’fade-in’類別 const timelineItems=document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item=> item.classList.add(‘fade-in’));//觀察每個時間軸元素consttimelineObserved
時間軸是導航和理解按時間順序發生的事件的有效視覺輔助工具。了解如何透過使用 CSS 和 JavaScript 來建立互動式時間線，它們在這方面共同形成了有效的組合。
建立時間軸結構
您可以從 GitHub 儲存庫 查看專案的完整程式碼。
為了開始，有必要在「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>
<!-- More Items -->
</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 repo in style.css 查看完整的樣式集。
將必要的樣式應用到網頁的 HTML 和 CSS 元件後，最終結果將類似於結構良好的佈局，具有視覺吸引力且易於導航。設計可以包含各種元素，例如圖像、文字方塊、表格、表單和按鈕，所有元素都以有組織的方式排列，以方便使用者與內容互動。此外，配色方案、版式和空白的使用有助於為瀏覽網站的使用者創造和諧的視覺體驗。
使用 JavaScript 製作動畫
為了啟動這個元素，請利用 Intersection Observer API，透過在 script.js 檔案中合併以下程式碼片段，在滾動時為時間軸條目設定動畫:
##＃ 初始設置
首先，選擇具有類別屬性「Timeline__item」的所有元件。
const timelineItems = document.querySelectorAll(".Timeline__item");
時間軸項目的初始樣式
首先，將每個元素的 alpha 值設為零，這將使它們不可見。然後，利用 CSS 過渡來實現無縫淡入淡出效果，如下所示:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
透過將時間軸的樣式合併到 JavaScript 檔案中而不是樣式表中，可以有效地實現漸進式增強。這種策略確保即使 JavaScript 無法正確執行，時間軸的基本結構和佈局仍然可見，從而為使用者提供一定程度的功能，無論可能出現任何技術問題。
路口觀察者回調
建立一個「fadeInOnScroll」函數，將元素的不透明度修改為 1，使它們在與檢視者螢幕接觸時可見。
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
路口觀察器選項
透過將觀察者的參數設為包含閾值 0.1 來配置觀察者，這表示當物件的 10% 可見時將觸發動畫。
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
建立並使用交叉口觀察器
最後，建立一個包含指定參數的 IntersectionObserver 對象，並將其附加到時間軸組件的每個實例。
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
最終結果應如下所示:
您的瀏覽器不支援影片標籤。
時間軸組件最佳實踐
需要遵守的一些做法包括:
透過實施響應式設計原則來增強佈局的適應性，透過仔細考慮比例、比例、流體網格、圖像、媒體查詢和行動優先方法，在各種螢幕和裝置上實現一致且不間斷的使用者體驗。
採用有效的程式設計技術對於確保無縫動畫效能至關重要。
利用語意上適當的 HTML 元素，確保文字和背景顏色之間的最佳對比度，並使用 ARIA 屬性來增強 Web 內容的整體可存取性。
讓你的時間表變得栩栩如生:網頁設計之旅
製作互動式時間軸超越了單純的資料呈現；相反，它涉及為觀眾創造一個令人著迷且啟發性的遭遇。 HTML 架構、CSS 藝術和 JavaScript 動畫技術的利用使得能夠開發出引人入勝的時間線，不僅能吸引觀眾的注意力，還能以引人入勝的方式傳達重要訊息。