Z uporabo osnovnih konceptov HTML, CSS in JS boste v hipu imeli pripravljeno privlačno časovnico.

Ključni zaključki

  • Zmogljivo časovnico je enostavno sestaviti s pomočjo CSS in JavaScript.
  • Začnite tako, da opišete strukturo HTML časovnice in oblikujete elemente časovnice s CSS.
  • Nadaljujte z dodajanjem animacije na časovnico z uporabo JavaScripta. Z vmesnikom Intersection Observer API lahko zbledite elemente časovne premice med pomikanjem.

Časovnice so močna vizualna orodja, ki uporabnikom pomagajo krmariti in razumeti kronološke dogodke. Raziščite, kako ustvariti interaktivno časovnico z uporabo dinamičnega dvojca CSS in JavaScript.

Gradnja strukture časovnice

Celotno kodo za ta projekt si lahko ogledate v Repozitorij GitHub.

Za začetek orišite strukturo HTML v index.html. Ustvarite dogodke in datume kot ločene komponente in tako postavite temelje za interaktivno časovnico.

<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">





instagram viewer


 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>

Trenutno je vaša komponenta videti takole:

Izberite postavitev za vašo časovnico: navpično vs. Vodoravno

Pri oblikovanju interaktivne časovnice lahko izberete navpični ali vodoravni slog. Navpične časovnice so preproste za uporabo, zlasti na telefonih, saj je to tipična smer, v kateri se pomikajo spletna mesta. Če ima vaša časovnica veliko vsebine, bo to verjetno najbolj priročna postavitev.

Horizontalne časovnice pa so privlačne na širokih zaslonih in odlične za ustvarjalna spletna mesta z manj podrobnostmi, ki lahko zmanjšajo drsenje od ene do druge strani. Vsak slog ima svoje prednosti, primerne za različne vrste spletnih mest in uporabniških izkušenj.

Oblikujte časovnico s CSS

Za časovnico boste oblikovali tri vrste vizualnih elementov: črte, vozlišča in datumske oznake.

  • Črte: Osrednja navpična črta, ustvarjena z uporabo Timeline__content:: za psevdoelementom, služi kot hrbtenica časovne premice. Oblikovana je z določeno širino in barvo, nameščena popolnoma tako, da je poravnana s sredino elementov časovne osi.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Vozlišča: Krogi, oblikovani z uporabo razreda Circle, delujejo kot vozlišča na časovni premici. Ti so popolnoma postavljeni na sredino vsakega elementa časovne premice in se vizualno razlikujejo z barvo ozadja, ki tvori ključne točke vzdolž časovne premice.
    .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;
    }
  • Označevalci datumov: Datumi, oblikovani z razredom Timeline__date, so prikazani na obeh straneh časovnice. Njihov položaj se spreminja levo in desno za vsak element časovne premice, kar ustvarja zamaknjen, uravnotežen videz vzdolž časovne premice.
    .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;}

Oglejte si celoten nabor stilov iz GitHub repo v style.css.

Po oblikovanju bi morala vaša komponenta izgledati takole:

Animiranje z JavaScriptom

Če želite animirati to komponento, uporabite Intersection Observer API za animiranje elementov časovne premice med drsenjem. Dodajte naslednjo kodo v script.js.

1. Začetna nastavitev

Najprej izberite vse elemente z razredom Timeline__item.

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

2. Začetno oblikovanje elementov časovne osi

Nastavite začetno motnost vsakega elementa na 0 (nevidno) in uporabite a Prehod CSS za gladko bledenje.

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

Te sloge bi lahko nastavili v slogovnem listu, vendar bi bilo to nevarno. Če se JavaScript ne zažene, bi ta pristop pustil vašo časovnico nevidno! Izolacija tega vedenja v datoteki JavaScript je dober primer progresivno izboljšanje.

3. Povratni klic opazovalca križišča

Definirajte funkcijo fadeInOnScroll, da spremenite motnost elementov na 1 (vidno), ko se sekajo z vidnim poljem.

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

4. Možnosti opazovalca križišča

Nastavite možnosti za opazovalca, s pragom 0,1, ki označuje, da se animacija sproži, ko je vidnih 10 % elementa.

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

5. Ustvarjanje in uporaba opazovalca križišč

Končajte tako, da ustvarite IntersectionObserver s temi možnostmi in ga uporabite za vsak element časovne osi.

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

Končni rezultat bi moral izgledati takole:

Najboljše prakse komponente časovnice

Nekatere prakse, ki se jih morate držati, vključujejo:

  • Optimizirajte svojo časovnico za različne velikosti zaslona. Naučite se tehnik odzivnega oblikovanja, da zagotovite brezhibno uporabniško izkušnjo v vseh napravah.
  • Uporabite učinkovite prakse kodiranja, da zagotovite gladke animacije.
  • Uporabite semantični HTML, ustrezna kontrastna razmerja in oznake ARIA za boljšo dostopnost.

Oživitev vaše časovnice: potovanje v spletno oblikovanje

Pri izdelavi interaktivne časovnice ne gre le za predstavitev informacij; gre za ustvarjanje privlačne in informativne izkušnje. Z združevanjem strukture HTML, stilov CSS in animacij JavaScript lahko oblikujete časovnico, ki bo očarala vaše občinstvo in hkrati zagotovila dragoceno vsebino.