Izmantojot HTML, CSS un JS pamatjēdzienus, jūs ātri izveidosit pievilcīgu laika grafiku.

Key Takeaways

  • Jaudīgu laika skalu ir viegli izveidot, izmantojot CSS un JavaScript.
  • Sāciet, iezīmējot laika skalas HTML struktūru un veidojot laika skalas elementus, izmantojot CSS.
  • Turpiniet pievienot animāciju laika skalai, izmantojot JavaScript. Varat izmantot Intersection Observer API, lai ritināšanas laikā izbalinātu laika skalas vienumus.

Laika skalas ir spēcīgi vizuāli rīki, kas palīdz lietotājiem orientēties un izprast hronoloģiskos notikumus. Izpētiet, kā izveidot interaktīvu laika skalu, izmantojot dinamisko CSS un JavaScript duetu.

Laika skalas struktūras veidošana

Jūs varat pārbaudīt pilnu šī projekta kodu no tā GitHub repozitorijs.

Lai sāktu, izklāstiet HTML struktūru index.html. Izveidojiet notikumus un datumus kā atsevišķus komponentus, liekot pamatu interaktīvai laika skalai.

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

Šobrīd jūsu komponents izskatās šādi:

Izvēlieties laika skalas izkārtojumu: vertikāli vai vertikāli. Horizontāli

Veidojot interaktīvu laika skalu, varat izvēlēties vertikālu vai horizontālu stilu. Vertikālās laika skalas ir viegli lietojamas, it īpaši tālruņos, jo tas ir tipisks virziens, kurā vietnes ritina. Ja jūsu laika skalā ir daudz satura, iespējams, šis būs ērtākais izkārtojums.

Horizontālās laika skalas tomēr ir pievilcīgas platajos ekrānos un ir lieliski piemērotas radošām vietnēm, kurās ir mazāk detaļu, kas var samazināt ritināšanu no vienas puses uz otru. Katram stilam ir savas priekšrocības, kas ir piemērotas dažāda veida vietnēm un lietotāju pieredzei.

Veidojiet laika skalas stilu, izmantojot CSS

Laika skalai ir trīs veidu vizuālie elementi: līnijas, mezgli un datuma marķieri.

  • Līnijas: Centrālā vertikālā līnija, kas izveidota, izmantojot Timeline__content:: pēc pseidoelementa, kalpo par laika skalas mugurkaulu. Tas ir veidots ar noteiktu platumu un krāsu, novietots tā, lai tas būtu pilnībā saskaņots ar laika skalas vienumu centru.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Mezgli: loki, kas veidoti, izmantojot apļa klasi, darbojas kā mezgli laika skalā. Tie ir absolūti novietoti katra laika skalas vienuma centrā un ir vizuāli atšķirīgi ar fona krāsu, veidojot galvenos punktus laika skalā.
    .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;
    }
  • Datuma marķieri: datumi, kas veidoti, izmantojot klasi Timeline__date, tiek rādīti abās laika skalas pusēs. To novietojums mainās pa kreisi un pa labi katram laika skalas vienumam, radot pakāpenisku, līdzsvarotu izskatu visā laika skalā.
    .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;}

Apskatiet pilnu stilu komplektu vietnē GitHub repo stils.css.

Pēc veidošanas jūsu komponentam vajadzētu izskatīties šādi:

Animācija ar JavaScript

Lai animētu šo komponentu, izmantojiet Intersection Observer API lai ritinot animētu laika skalas vienumus. Pievienojiet tālāk norādīto kodu script.js.

1. Sākotnējā iestatīšana

Vispirms atlasiet visus elementus ar klasi Timeline__item.

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

2. Laika skalas vienumu sākotnējais stils

Iestatiet katra vienuma sākotnējo necaurredzamību uz 0 (neredzams) un lietojiet a CSS pāreja vienmērīgai izbalēšanai.

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

Jūs varētu iestatīt šos stilus stila lapā, taču tas būtu bīstami. Ja JavaScript neizdodas palaist, šī pieeja atstātu jūsu laika skalu neredzamu! Šīs darbības izolēšana JavaScript failā ir labs piemērs progresīva uzlabošana.

3. Krustojuma novērotāja atzvans

Definējiet funkciju fadeInOnScroll, lai mainītu vienumu necaurredzamību uz 1 (redzams), kad tie krustojas ar skata logu.

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

4. Krustojuma novērotāja opcijas

Iestatiet novērotāja opcijas ar slieksni 0,1, kas norāda, ka animācija tiek aktivizēta, kad ir redzami 10% vienuma.

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

5. Krustojuma novērotāja izveide un izmantošana

Pabeidziet, izveidojot IntersectionObserver ar šīm opcijām un piemērojot to katram laika skalas vienumam.

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

Gala rezultātam vajadzētu izskatīties šādi:

Laika skalas komponentu paraugprakse

Dažas prakses, kas jāievēro, ietver:

  • Optimizējiet savu laika skalu dažādiem ekrāna izmēriem. Apgūstiet adaptīvas dizaina metodes, lai nodrošinātu netraucētu lietotāja pieredzi visās ierīcēs.
  • Izmantojiet efektīvu kodēšanas praksi, lai nodrošinātu vienmērīgu animāciju.
  • Izmantojiet semantisko HTML, pareizas kontrasta attiecības un ARIA etiķetes labākai pieejamībai.

Atdzīviniet savu laika skalu: ceļojums tīmekļa dizainā

Interaktīvas laika skalas veidošana nav tikai informācijas sniegšana; tas ir par saistošas ​​un informatīvas pieredzes radīšanu. Apvienojot HTML struktūru, CSS stilu un JavaScript animācijas, varat izveidot laika skalu, kas aizrauj jūsu auditoriju, vienlaikus nodrošinot vērtīgu saturu.