Koristeći osnovne koncepte HTML-a, CSS-a i JS-a, imat ćete atraktivnu vremensku traku koja će se pokrenuti u tren oka.

Ključni zahvati

  • Moćnu vremensku traku lako je izgraditi pomoću CSS-a i JavaScripta.
  • Započnite ocrtavanjem HTML strukture vremenske trake i oblikovanjem elemenata vremenske trake pomoću CSS-a.
  • Nastavite dodavati animaciju vremenskoj traci pomoću JavaScripta. Možete koristiti Intersection Observer API za izbljeđivanje stavki vremenske trake pri pomicanju.

Vremenske trake moćni su vizualni alati koji korisnicima pomažu u kretanju i razumijevanju kronoloških događaja. Istražite kako stvoriti interaktivnu vremensku traku koristeći dinamički duo CSS-a i JavaScripta.

Izgradnja strukture vremenske trake

Možete provjeriti cijeli kod za ovaj projekt na GitHub spremište.

Za početak ocrtajte HTML strukturu u index.html. Stvorite događaje i datume kao zasebne komponente, postavljajući temelj za interaktivnu vremensku traku.

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





instagram viewer



<divclass="Timeline__header">
<h2>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>

U ovom trenutku vaša komponenta izgleda ovako:

Odaberite raspored za svoju vremensku traku: okomito vs. Horizontalno

Prilikom dizajniranja interaktivne vremenske trake možete odabrati okomiti ili vodoravni stil. Vertikalne vremenske crte jednostavne su za korištenje, posebno na telefonima, jer je to uobičajeni smjer u kojem se pomiču web stranice. Ako vaša vremenska traka ima mnogo sadržaja, ovo će vjerojatno biti najprikladniji izgled.

Horizontalne vremenske crte, međutim, privlačne su na širokim zaslonima i izvrsne su za kreativne stranice s manje detalja, koje mogu minimizirati pomicanje s jedne na drugu stranu. Svaki stil ima svoje pogodnosti, prikladne za različite vrste web stranica i korisničkih iskustava.

Stilizirajte vremensku traku pomoću CSS-a

Postoje tri vrste vizualnih elemenata koje ćete stilizirati za vremensku crtu: linije, čvorovi i oznake datuma.

  • Linije: Središnja okomita crta, stvorena pomoću Timeline__content:: nakon pseudoelementa, služi kao okosnica vremenske trake. Stiliziran je specifičnom širinom i bojom, postavljen tako da je potpuno poravnat sa središtem stavki vremenske trake.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Čvorovi: Krugovi, oblikovani pomoću klase kruga, djeluju kao čvorovi na vremenskoj traci. One su apsolutno postavljene u središte svake stavke vremenske trake i vizualno se razlikuju bojom pozadine, tvoreći ključne točke duž vremenske trake.
    .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;
    }
  • Oznake datuma: Datumi, oblikovani pomoću klase Timeline__date, prikazuju se s obje strane vremenske trake. Njihovo pozicioniranje se izmjenjuje između lijeve i desne strane za svaku stavku vremenske trake, stvarajući raspoređen, uravnotežen izgled duž vremenske trake.
    .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;}

Provjerite cijeli niz stilova iz GitHub repo in stil.css.

Nakon oblikovanja, vaša bi komponenta trebala izgledati ovako:

Animiranje s JavaScriptom

Da biste animirali ovu komponentu, koristite Intersection Observer API za animiranje stavki vremenske trake pri pomicanju. Dodajte sljedeći kod u skripta.js.

1. Početno postavljanje

Prvo odaberite sve elemente s klasom Timeline__item.

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

2. Početno oblikovanje stavki vremenske trake

Postavite početnu neprozirnost svake stavke na 0 (nevidljivo) i primijenite a CSS prijelaz za glatko blijeđenje.

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

Možete postaviti ove stilove u listu stilova, ali bilo bi opasno. Ako se JavaScript ne uspije pokrenuti, taj bi pristup vašu vremensku crtu ostavio nevidljivom! Izoliranje ovog ponašanja u JavaScript datoteci dobar je primjer progresivno poboljšanje.

3. Povratni poziv promatrača raskrižja

Definirajte funkciju fadeInOnScroll za promjenu neprozirnosti stavki na 1 (vidljive) kada se sijeku s okvirom za prikaz.

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

4. Opcije promatrača raskrižja

Postavite opcije za promatrača, s pragom od 0,1 koji označava da se animacija pokreće kada je vidljivo 10% stavke.

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

5. Stvaranje i korištenje Intersection Observer

Završite stvaranjem IntersectionObservera s ovim opcijama i njegovom primjenom na svaku stavku vremenske trake.

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

Konačni rezultat trebao bi izgledati ovako:

Najbolji primjeri iz prakse komponente vremenske trake

Neke prakse kojih se treba pridržavati uključuju:

  • Optimizirajte svoju vremensku traku za različite veličine zaslona. Naučite tehnike responzivnog dizajna kako biste osigurali besprijekorno korisničko iskustvo na svim uređajima.
  • Koristite učinkovite postupke kodiranja kako biste osigurali glatke animacije.
  • Koristite semantički HTML, odgovarajuće omjere kontrasta i ARIA oznake za bolju pristupačnost.

Oživljavanje vaše vremenske trake: putovanje u web dizajn

Izgradnja interaktivne vremenske trake nije samo predstavljanje informacija; radi se o stvaranju zanimljivog i informativnog iskustva. Kombiniranjem HTML strukture, CSS stila i JavaScript animacija, možete izraditi vremensku traku koja osvaja vašu publiku dok isporučuje vrijedan sadržaj.