Naudodami pagrindines HTML, CSS ir JS sąvokas galėsite greitai sukurti patrauklią laiko juostą.

Key Takeaways

  • Galingą laiko juostą lengva sukurti naudojant CSS ir JavaScript.
  • Pradėkite nuo laiko juostos HTML struktūros apibūdinimo ir laiko juostos elementų stiliaus CSS.
  • Toliau pridėkite animaciją prie laiko juostos naudodami „JavaScript“. Galite naudoti Intersection Observer API, kad išblėstumėte laiko juostos elementus slinkdami.

Laiko juostos yra galingi vaizdiniai įrankiai, padedantys naudotojams naršyti ir suprasti chronologinius įvykius. Sužinokite, kaip sukurti interaktyvią laiko juostą naudojant dinamišką CSS ir JavaScript duetą.

Laiko juostos struktūros kūrimas

Visą šio projekto kodą galite peržiūrėti iš jo GitHub saugykla.

Norėdami pradėti, apibūdinkite HTML struktūrą index.html. Kurkite įvykius ir datas kaip atskirus komponentus, padėdami interaktyvios laiko juostos pagrindą.

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





instagram viewer

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

Šiuo metu jūsų komponentas atrodo taip:

Pasirinkite savo laiko juostos išdėstymą: vertikali ir vertikalus. Horizontaliai

Kurdami interaktyvią laiko juostą galite pasirinkti vertikalų arba horizontalų stilių. Vertikalias laiko juostas lengva naudoti, ypač telefonuose, nes tai yra įprasta svetainių slinkimo kryptis. Jei jūsų laiko juostoje yra daug turinio, tai tikriausiai bus patogiausias išdėstymas.

Tačiau horizontalios laiko juostos yra patrauklios plačiuose ekranuose ir puikiai tinka kūrybingoms svetainėms, kuriose yra mažiau detalių, kurios gali sumažinti slinkimą iš vienos pusės į kitą. Kiekvienas stilius turi savo privalumų, tinka įvairių tipų svetainėms ir naudotojų patirčiai.

Sukurkite laiko juostos stilių naudodami CSS

Yra trijų tipų vaizdiniai elementai, kuriuos galite sukurti laiko juostai: linijos, mazgai ir datos žymekliai.

  • Linijos: centrinė vertikali linija, sukurta naudojant Timeline__content:: po pseudoelemento, yra laiko juostos pagrindas. Jis sukurtas tam tikro pločio ir spalvos, išdėstytas taip, kad atitiktų laiko juostos elementų centrą.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Mazgai: apskritimai, sukurti naudojant apskritimo klasę, laiko juostoje veikia kaip mazgai. Jie yra absoliučiai kiekvieno laiko juostos elemento centre ir vizualiai skiriasi fono spalva, sudarydami pagrindinius laiko juostos taškus.
    .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;
    }
  • Datos žymekliai: datos, sukurtos naudojant klasę Timeline__date, rodomos abiejose laiko juostos pusėse. Kiekvienam laiko juostos elementui jų padėtis keičiasi į kairę ir į dešinę, sukuriant laipsnišką, subalansuotą vaizdą laiko juostoje.
    .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;}

Peržiūrėkite visą stilių rinkinį iš „GitHub“ atpirkimas stilius.css.

Po stiliaus jūsų komponentas turėtų atrodyti taip:

Animavimas naudojant JavaScript

Norėdami animuoti šį komponentą, naudokite Intersection Observer API animuoti laiko juostos elementus slinkdami. Pridėkite šį kodą prie script.js.

1. Pradiniai nustatymai

Pirmiausia pasirinkite visus elementus su klase Timeline__item.

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

2. Pradinis laiko juostos elementų stilius

Nustatykite kiekvieno elemento pradinį neskaidrumą į 0 (nematomas) ir pritaikykite a CSS perėjimas sklandžiam blukimui.

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

Galite nustatyti šiuos stilius stiliaus lape, bet tai padaryti būtų pavojinga. Jei „JavaScript“ nepavyks paleisti, jūsų laiko juosta liktų nematoma! Tokio elgesio išskyrimas „JavaScript“ faile yra geras pavyzdys laipsniškas tobulinimas.

3. Sankryžos stebėtojo atgalinis skambutis

Apibrėžkite fadeInOnScroll funkciją, kad pakeistumėte elementų neskaidrumą į 1 (matomas), kai jie susikerta su peržiūros sritis.

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

4. Sankryžos stebėtojo parinktys

Nustatykite stebėtojo parinktis su 0,1 riba, rodančia, kad animacija suaktyvinama, kai matoma 10 % elemento.

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

5. Sankryžos stebėjimo priemonės kūrimas ir naudojimas

Užbaikite sukurdami IntersectionObserver su šiomis parinktimis ir pritaikydami ją kiekvienam laiko juostos elementui.

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

Galutinis rezultatas turėtų atrodyti taip:

Laiko juostos komponento geriausia praktika

Kai kurios praktikos, kurių reikia laikytis, apima:

  • Optimizuokite savo laiko juostą skirtingų dydžių ekranams. Išmokite interaktyvaus dizaino metodų, kad užtikrintumėte sklandžią naudotojo patirtį visuose įrenginiuose.
  • Naudokite veiksmingą kodavimo praktiką, kad užtikrintumėte sklandžią animaciją.
  • Naudokite semantinį HTML, tinkamas kontrasto santykis ir ARIA etiketės, kad būtų lengviau pasiekti.

Atgaivinkite savo laiko juostą: žiniatinklio dizaino kelionė

Interaktyvios laiko juostos kūrimas yra ne tik informacijos pateikimas; tai patrauklios ir informatyvios patirties kūrimas. Derindami HTML struktūrą, CSS stilių ir „JavaScript“ animacijas, galite sukurti laiko juostą, kuri sužavės jūsų auditoriją ir pateiks vertingą turinį.