Použitím základných pojmov HTML, CSS a JS budete mať atraktívnu časovú os v prevádzke okamžite.

Kľúčové informácie

  • Výkonná časová os sa ľahko vytvára pomocou CSS a JavaScriptu.
  • Začnite tým, že načrtnete štruktúru HTML časovej osi a upravíte štýl prvkov časovej osi pomocou CSS.
  • Pokračujte v pridávaní animácie na časovú os pomocou JavaScriptu. Rozhranie Intersection Observer API môžete použiť na vyblednutie položiek časovej osi pri posúvaní.

Časové osi sú výkonné vizuálne nástroje, ktoré pomáhajú používateľom orientovať sa a pochopiť chronologické udalosti. Preskúmajte, ako vytvoriť interaktívnu časovú os pomocou dynamického dua CSS a JavaScriptu.

Budovanie štruktúry časovej osi

Celý kód pre tento projekt si môžete pozrieť z jeho úložisko GitHub.

Na začiatok načrtnite štruktúru HTML index.html. Vytvárajte udalosti a dátumy ako samostatné komponenty a položte základ pre interaktívnu časovú os.

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





instagram viewer


h2>
<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>

Momentálne váš komponent vyzerá takto:

Vyberte si rozloženie pre svoju časovú os: Vertikálne vs. Horizontálne

Pri navrhovaní interaktívnej časovej osi si môžete vybrať vertikálny alebo horizontálny štýl. Vertikálne časové osi sa ľahko používajú, najmä na telefónoch, pretože toto je typický smer, ktorým sa webové stránky posúvajú. Ak má vaša časová os veľa obsahu, toto bude pravdepodobne najpohodlnejšie rozloženie.

Horizontálne časové osi sú však príťažlivé na širokouhlých obrazovkách a sú skvelé pre kreatívne stránky s menším počtom detailov, ktoré môžu minimalizovať rolovanie zo strany na stranu. Každý štýl má svoje výhody, vhodné pre rôzne typy webových stránok a používateľské skúsenosti.

Upravte štýl časovej osi pomocou CSS

Existujú tri typy vizuálnych prvkov, ktoré upravíte pre časovú os: čiary, uzly a značky dátumu.

  • Čiary: Centrálna zvislá čiara vytvorená pomocou pseudoprvku Timeline__content:: slúži ako chrbtica časovej osi. Má špecifickú šírku a farbu a je umiestnená tak, aby bola úplne zarovnaná so stredom položiek časovej osi.
    .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 upravené pomocou triedy kruhov fungujú ako uzly na časovej osi. Sú úplne umiestnené v strede každej položky časovej osi a sú vizuálne odlišné farbou pozadia, čím tvoria kľúčové body na časovej osi.
    .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;
    }
  • Dátumové značky: Dátumy upravené pomocou triedy Timeline__date sa zobrazujú na oboch stranách časovej osi. Ich umiestnenie sa pre každú položku časovej osi strieda medzi ľavou a pravou stranou, čím sa pozdĺž časovej osi vytvára rozložený, vyvážený vzhľad.
    .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;}

Pozrite si celú sadu štýlov z Úložisko GitHub style.css.

Po stylingu by mal váš komponent vyzerať takto:

Animácia pomocou JavaScriptu

Ak chcete animovať tento komponent, použite rozhranie Intersection Observer API animovať položky časovej osi pri posúvaní. Pridajte nasledujúci kód do script.js.

1. Pôvodné nastavenie

Najprv vyberte všetky prvky s triedou Timeline__item.

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

2. Počiatočný štýl položiek časovej osi

Nastavte počiatočnú nepriehľadnosť každej položky na 0 (neviditeľné) a použite a Prechod CSS pre hladké vyblednutie.

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

Tieto štýly môžete nastaviť v šablóne štýlov, ale bolo by to nebezpečné. Ak sa JavaScript nespustí, tento prístup ponechá vašu časovú os neviditeľnú! Izolácia tohto správania v súbore JavaScript je dobrým príkladom progresívne zlepšovanie.

3. Spätné volanie pozorovateľa križovatky

Definujte funkciu fadeInOnScroll na zmenu nepriehľadnosti položiek na 1 (viditeľné), keď sa pretínajú s výrezom.

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

4. Možnosti pozorovateľa križovatiek

Nastavte možnosti pre pozorovateľa s prahovou hodnotou 0,1, čo znamená, že animácia sa spustí, keď je viditeľných 10 % položky.

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

5. Vytvorenie a používanie Intersection Observer

Dokončite vytvorením objektu IntersectionObserver s týmito možnosťami a jeho aplikovaním na každú položku časovej osi.

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

Konečný výsledok by mal vyzerať takto:

Osvedčené postupy pre komponent časovej osi

Niektoré postupy, ktoré je potrebné dodržiavať, zahŕňajú:

  • Optimalizujte svoju časovú os pre rôzne veľkosti obrazovky. Naučte sa techniky responzívneho dizajnu, aby ste zabezpečili bezproblémovú používateľskú skúsenosť naprieč zariadeniami.
  • Použite efektívne postupy kódovania na zabezpečenie plynulých animácií.
  • Použite sémantické HTML, správne kontrastné pomery a štítky ARIA pre lepšiu dostupnosť.

Oživte svoju časovú os: Cesta vo webdizajne

Budovanie interaktívnej časovej osi nie je len o prezentovaní informácií; ide o vytvorenie pútavého a informatívneho zážitku. Kombináciou štruktúry HTML, štýlu CSS a animácií JavaScriptu môžete vytvoriť časovú os, ktorá zaujme vaše publikum a zároveň poskytne hodnotný obsah.