HTML-i, CSS-i ja JS-i põhikontseptsioone kasutades on teil atraktiivne ajaskaala ja see hakkab kiiresti tööle.

Võtmed kaasavõtmiseks

  • Võimas ajaskaala on lihtne luua CSS-i ja JavaScripti abil.
  • Alustuseks visandage ajaskaala HTML-i struktuur ja kujundage ajaskaala elemendid CSS-iga.
  • Jätkake animatsiooni lisamist ajaskaalale JavaScripti abil. Saate kasutada Intersection Observer API-t, et kerimisel ajaskaala üksusi tuhmuda.

Ajaskaalad on võimsad visuaalsed tööriistad, mis aitavad kasutajatel kronoloogilisi sündmusi navigeerida ja mõista. Uurige, kuidas luua interaktiivset ajaskaala, kasutades CSS-i ja JavaScripti dünaamilist duot.

Ajaskaala struktuuri loomine

Selle projekti täielikku koodi saate vaadata sellest GitHubi hoidla.

Alustuseks kirjeldage HTML-i struktuuri index.html. Looge sündmused ja kuupäevad eraldi komponentidena, pannes aluse interaktiivsele ajaskaalale.

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

Hetkel näeb teie komponent välja selline:

Valige oma ajaskaala paigutus: vertikaalne vs. Horisontaalne

Interaktiivse ajaskaala kujundamisel saate valida kas vertikaalse või horisontaalse stiili. Vertikaalseid ajaskaalasid on lihtne kasutada, eriti telefonides, kuna see on tüüpiline suund, kuhu veebisaidid kerivad. Kui teie ajaskaalal on palju sisu, on see tõenäoliselt kõige mugavam paigutus.

Horisontaalsed ajaskaalad on aga atraktiivsed laiekraanidel ja sobivad suurepäraselt loominguliste saitide jaoks, kus on vähem detaile, mis võivad minimeerida küljelt küljele kerimist. Igal stiilil on oma eelised, mis sobivad erinevat tüüpi veebisaitidele ja kasutuskogemustele.

Stiilige ajaskaala CSS-i abil

Ajaskaalal on kolme tüüpi visuaalseid elemente: jooned, sõlmed ja kuupäevamarkerid.

  • Jooned: keskne vertikaaljoon, mis on loodud pseudoelemendi järel Timeline__content:: abil, toimib ajatelje selgroona. See on kujundatud kindla laiuse ja värviga ning asetatud absoluutselt ajaskaala üksuste keskpunktiga joondamiseks.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Sõlmed: ringiklassi abil kujundatud ringid toimivad ajateljel sõlmedena. Need paiknevad absoluutselt iga ajaskaala üksuse keskel ja on visuaalselt eristatavad taustavärviga, moodustades ajateljel põhipunktid.
    .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;
    }
  • Kuupäeva markerid: kuupäevad, mis on kujundatud klassi Timeline__date abil, kuvatakse ajaskaala mõlemal küljel. Nende positsioneerimine vaheldub iga ajaskaala üksuse vasak- ja parempoolses suunas, luues ajaskaalal järk-järgult tasakaalustatud ilme.
    .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;}

Vaadake kogu stiilide komplekti saidilt GitHubi repo sisse stiil.css.

Pärast stiilimist peaks teie komponent välja nägema järgmine:

Animeerimine JavaScriptiga

Selle komponendi animeerimiseks kasutage Intersection Observer API ajaskaala üksuste animeerimiseks kerimisel. Lisage järgmine kood script.js.

1. Algseadistus

Esmalt valige kõik elemendid klassiga Timeline__item.

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

2. Ajaskaala üksuste esialgne stiil

Määrake iga üksuse algseks läbipaistmatuseks 0 (nähtamatu) ja rakendage a CSS-i üleminek sujuvaks tuhmumiseks.

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

Saate need stiilid stiililehel määrata, kuid see oleks ohtlik. Kui JavaScript ei tööta, jätaks see lähenemine teie ajaskaala nähtamatuks! Selle käitumise isoleerimine JavaScripti failis on hea näide järkjärguline täiustamine.

3. Ristmikuvaatleja tagasihelistamine

Määratlege funktsioon fadeInOnScroll, et muuta üksuste läbipaistmatus 1-ks (nähtav), kui need ristuvad vaateavaga.

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

4. Ristmikuvaatleja valikud

Määrake vaatleja jaoks suvandid, mille läviväärtus on 0,1, mis näitab, et animatsioon käivitub, kui 10% üksusest on nähtaval.

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

5. Ristmikuvaatleja loomine ja kasutamine

Lõpetage, luues nende suvanditega IntersectionObserveri ja rakendades seda igale ajaskaala üksusele.

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

Lõpptulemus peaks välja nägema selline:

Ajaskaala komponendi parimad tavad

Mõned tavad, mida järgida, hõlmavad järgmist:

  • Optimeerige oma ajaskaala erinevate ekraanisuuruste jaoks. Õppige tundliku disaini tehnikaid, et tagada sujuv kasutuskogemus kõigis seadmetes.
  • Kasutage sujuvate animatsioonide tagamiseks tõhusaid kodeerimisvõtteid.
  • Kasutage semantilist HTML-i, õiged kontrastsuse suhted ja ARIA sildid parema juurdepääsetavuse tagamiseks.

Oma ajaskaala ellu äratamine: teekond veebidisaini alal

Interaktiivse ajaskaala loomine ei seisne ainult teabe esitamises; see on köitva ja informatiivse kogemuse loomine. Kombineerides HTML-i struktuuri, CSS-stiili ja JavaScripti animatsioone, saate luua ajaskaala, mis köidab teie vaatajaskonda, pakkudes samal ajal väärtuslikku sisu.