Table of Contents
Klíčové věci
- Výkonnou časovou osu lze snadno vytvořit pomocí CSS a JavaScriptu.
- Začněte nastíněním struktury HTML časové osy a stylingem prvků časové osy pomocí CSS.
- Pokračujte v přidávání animace na časovou osu pomocí JavaScriptu. K vyblednutí položek časové osy při posouvání můžete použít rozhraní Intersection Observer API.
Časové osy jsou výkonné vizuální nástroje, které uživatelům pomáhají orientovat se v chronologických událostech a porozumět jim. Prozkoumejte, jak vytvořit interaktivní časovou osu pomocí dynamického dua CSS a JavaScriptu.
Budování struktury časové osy
Nejprve načrtněte strukturu HTML v souboru index.html. Vytvářejte události a data jako samostatné komponenty a položte tak základy interaktivní časové osy.
<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>
V tuto chvíli vaše komponenta vypadá takto:
Vyberte si rozvržení pro svou časovou osu: Vertikální vs. Horizontální
Při navrhování interaktivní časové osy si můžete vybrat vertikální nebo horizontální styl. Vertikální časové osy se snadno používají, zejména na telefonech, protože toto je typický směr, kterým se webové stránky posouvají. Pokud má vaše časová osa hodně obsahu, bude toto pravděpodobně nejpohodlnější uspořádání.
Horizontální časové osy jsou však přitažlivé na širokoúhlých obrazovkách a jsou skvělé pro kreativní weby s méně detaily, které mohou minimalizovat posouvání ze strany na stranu. Každý styl má své výhody, vhodné pro různé typy webů a uživatelské zkušenosti.
Upravte styl časové osy pomocí CSS
Existují tři typy vizuálních prvků, které upravíte pro časovou osu: čáry, uzly a značky data.
- Čáry: Středová svislá čára vytvořená pomocí pseudoprvku Timeline__content::after slouží jako páteř časové osy. Je navržena se specifickou šířkou a barvou a je umístěna absolutně tak, aby byla v souladu se středem položek časové osy.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} - Uzly: Kruhy, stylizované pomocí třídy kruh, fungují jako uzly na časové ose. Ty jsou absolutně umístěny ve středu každé položky časové osy a jsou vizuálně odlišeny barvou pozadí, což tvoří klíčové body na časové ose.
.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;
} - Značky data: Data, stylizovaná pomocí třídy Timeline__date, se zobrazují na obou stranách časové osy. Jejich umístění se u každé položky časové osy střídá mezi levou a pravou stranou a vytváří na časové ose rozložený, vyvážený vzhled.
.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;}
Podívejte se na celou sadu stylů z GitHub repo ve style.css.
Po stylingu by vaše komponenta měla vypadat takto:
Animace pomocí JavaScriptu
Chcete-li animovat tuto komponentu, použijte rozhraní Intersection Observer API k animaci položek časové osy při posouvání. Přidejte následující kód do script.js.
1. Počáteční nastavení
Nejprve vyberte všechny prvky s třídou Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Počáteční styling položek časové osy
Nastavte počáteční neprůhlednost každé položky na 0 (neviditelná) a použijte přechod CSS pro hladké vyblednutí.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Tyto styly můžete nastavit v šabloně stylů, ale bylo by to nebezpečné. Pokud se JavaScript nepodaří spustit, tento přístup ponechá vaši časovou osu neviditelnou! Izolace tohoto chování v souboru JavaScript je dobrým příkladem postupného vylepšování.
3. Zpětné volání pozorovatele křižovatky
Definujte funkci fadeInOnScroll pro změnu krytí položek na 1 (viditelné), když se protínají s výřezem.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Možnosti pozorovatele křižovatek
Nastavte možnosti pro pozorovatele s prahovou hodnotou 0,1, která označuje, že se animace spustí, když je viditelných 10 % položky.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Vytvoření a používání Průsečíku
Dokončete vytvořením IntersectionObserver s těmito možnostmi a jeho aplikováním na každou položku časové osy.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
Konečný výsledek by měl vypadat takto:
Doporučené postupy pro komponentu časové osy
Některé postupy, které je třeba dodržovat, zahrnují:
- Optimalizujte svou časovou osu pro různé velikosti obrazovky. Naučte se techniky responzivního návrhu, abyste zajistili bezproblémové uživatelské prostředí napříč zařízeními.
- Používejte efektivní postupy kódování, abyste zajistili plynulé animace.
- Pro lepší přístupnost používejte sémantické HTML, správné kontrastní poměry a štítky ARIA.
Oživte svou časovou osu: Cesta ve webdesignu
Vytváření interaktivní časové osy není jen o prezentaci informací; jde o vytvoření poutavé a informativní zkušenosti. Kombinací struktury HTML, stylů CSS a animací JavaScriptu můžete vytvořit časovou osu, která zaujme vaše publikum a zároveň poskytne hodnotný obsah.