Zásadní body
- Efektivní časovou osu lze snadno sestavit s využitím CSS a JavaScriptu.
- Začněte definováním HTML struktury pro časovou osu a následně stylováním jejích prvků pomocí CSS.
- Pokračujte přidáním animací do časové osy prostřednictvím JavaScriptu. Pro postupné zviditelňování prvků časové osy při rolování stránky lze využít Intersection Observer API.
Časové osy představují mocný vizuální nástroj, který uživatelům usnadňuje orientaci v chronologickém sledu událostí a jejich pochopení. Podívejme se, jak vytvořit interaktivní časovou osu za pomoci dynamické kombinace CSS a JavaScriptu.
Vytvoření struktury časové osy
Nejprve si načrtněte HTML strukturu v souboru index.html. Jednotlivé události a data vytvořte jako samostatné komponenty, čímž položíte základ pro interaktivní časovou osu.
<body>
<section class="timeline-section">
<div class="container">
<div class="Timeline__header">
<h2>Časová osa</h2> <p class="heading--title">
Zde je rozpis času, který předpokládáme <br />
pro nadcházející událost.
</p>
</div> <div class="Timeline__content">
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Událost 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. prosince 2023</h3>
</div> <div class="Timeline__item">
<div class="Timeline__text">
<h3>Událost 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. prosince 2023</h3>
</div>
</div>
</div>
</section>
</body>
V tomto okamžiku bude vaše komponenta vypadat takto:
Výběr rozvržení časové osy: Vertikální vs. Horizontální
Při návrhu interaktivní časové osy máte na výběr mezi vertikálním a horizontálním stylem. Vertikální časové osy jsou snadno použitelné, zejména na mobilních zařízeních, jelikož se jedná o typický směr posouvání webových stránek. Pokud vaše časová osa obsahuje velké množství obsahu, bude toto pravděpodobně nejpohodlnější uspořádání.
Horizontální časové osy však působí atraktivně na širokoúhlých obrazovkách a jsou ideální pro kreativní weby s menším množstvím detailů, kde mohou minimalizovat posouvání do stran. Každý styl má své výhody a hodí se pro různé typy webů a uživatelské zážitky.
Stylování časové osy pomocí CSS
Pro časovou osu budete upravovat tři typy vizuálních prvků: čáry, uzly a značky data.
- Čáry: Středová svislá čára, vytvořená pomocí pseudoelementu `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 zarovnána 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, stylované pomocí třídy `circle`, 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í, čímž vytvářejí 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, stylovaná 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, čímž 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;}
Celou sadu stylů si můžete prohlédnout v souboru style.css v repozitáři GitHub.
Po stylování by vaše komponenta měla vypadat takto:
Animace pomocí JavaScriptu
Pro animaci této komponenty použijte Intersection Observer API pro animaci položek časové osy při rolování stránky. Následující kód vložte do souboru 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í stylování položek časové osy
Nastavte počáteční průhlednost každé položky na 0 (neviditelná) a použijte CSS přechod pro plynulé zviditelnění.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
});
Tyto styly můžete definovat ve stylu šablony, ale bylo by to riskantní. Pokud by se JavaScript nespustil, vaše časová osa by zůstala neviditelná! Izolace tohoto chování v souboru JavaScript je dobrým příkladem postupného zlepšování.
3. Zpětné volání pozorovatele průniku
Definujte funkci `fadeInOnScroll` pro změnu průhlednosti položek na 1 (viditelné), když se objeví ve výřezu.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Možnosti pozorovatele průniku
Nastavte možnosti pro pozorovatele s prahovou hodnotou 0,1, což znamená, že animace se spustí, když je viditelných 10 % položky.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
};
5. Vytvoření a použití pozorovatele průniku
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);
});
Výsledný efekt by měl vypadat takto:
Doporučené postupy pro komponentu časové osy
Mezi doporučené postupy, které je vhodné dodržovat, patří:
- Optimalizujte časovou osu pro různé velikosti obrazovek. Osvojte si techniky responzivního designu, abyste zajistili bezproblémový uživatelský zážitek na různých zařízeních.
- Používejte efektivní postupy kódování, abyste zajistili plynulé animace.
- Pro lepší přístupnost používejte sémantické HTML, vhodné kontrastní poměry a popisky ARIA.
Oživení časové osy: Cesta webdesignem
Vytvoření interaktivní časové osy není jen o prezentaci informací; jde o vytvoření poutavého a informativního zážitku. 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.