Pomocí základních pojmů HTML, CSS a JS budete mít atraktivní časovou osu připravenou a spuštěnou během okamžiku.

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

Můžete se podívat na úplný kód tohoto projektu z jeho úložiště GitHub.

Nejprve načrtněte strukturu HTML index.html. Vytvářejte události a data jako samostatné komponenty a položte tak základy interaktivní časové osy.

<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>





instagram viewer

Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
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 to 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ší rozložení.

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: Centrální svislá čára vytvořená pomocí Timeline__content:: po pseudoprvku 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;
    }
  • Datumovky: Data upravená 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 Úložiště GitHub styl.css.

Po stylingu by vaše komponenta měla vypadat takto:

Animace pomocí JavaScriptu

K animaci této komponenty použijte rozhraní Intersection Observer API animovat položky č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í krytí každé položky na 0 (neviditelné) a použijte a Přechod CSS pro plynulé 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 progresivní vylepšení.

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žovatky

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žití 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.
  • Použijte sémantické HTML, správné kontrastní poměry a štítky ARIA pro lepší dostupnost.

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.