Met behulp van de basisconcepten HTML, CSS en JS heb je in een mum van tijd een aantrekkelijke tijdlijn operationeel.

Belangrijkste leerpunten

  • Een krachtige tijdlijn is eenvoudig te bouwen met behulp van CSS en JavaScript.
  • Begin met het schetsen van de HTML-structuur van de tijdlijn en het opmaken van de tijdlijnelementen met CSS.
  • Ga door met het toevoegen van animatie aan de tijdlijn met behulp van JavaScript. U kunt de Intersection Observer API gebruiken om tijdlijnitems tijdens het scrollen in te faden.

Tijdlijnen zijn krachtige visuele hulpmiddelen waarmee gebruikers chronologische gebeurtenissen kunnen navigeren en begrijpen. Ontdek hoe u een interactieve tijdlijn kunt maken met behulp van het dynamische duo CSS en JavaScript.

Het opbouwen van de tijdlijnstructuur

Je kunt de volledige code voor dit project bekijken via zijn GitHub-opslagplaats.

Om te beginnen schetst u de HTML-structuur in index.html. Creëer evenementen en datums als afzonderlijke componenten en leg zo de basis voor de interactieve tijdlijn.

instagram viewer 
<body>
<sectionclass="timeline-section">
<divclass="container">
<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>

Op dit moment ziet uw component er als volgt uit:

Kies een lay-out voor uw tijdlijn: verticaal vs. Horizontaal

Bij het ontwerpen van een interactieve tijdlijn kunt u kiezen voor een verticale of horizontale stijl. Verticale tijdlijnen zijn gemakkelijk te gebruiken, vooral op telefoons, omdat dit de typische richting is waarin websites scrollen. Als uw tijdlijn veel inhoud bevat, is dit waarschijnlijk de handigste lay-out.

Horizontale tijdlijnen zijn echter aantrekkelijk op brede schermen en zijn ideaal voor creatieve sites met minder details, die het scrollen van links naar rechts kunnen minimaliseren. Elke stijl heeft zijn voordelen, geschikt voor verschillende soorten websites en gebruikerservaringen.

Stijl de tijdlijn met CSS

Er zijn drie soorten visuele elementen die u voor de tijdlijn kunt stylen: lijnen, knooppunten en datummarkeringen.

  • Lijnen: Een centrale verticale lijn, gemaakt met behulp van het Tijdlijn__content:: na pseudo-element, dient als de ruggengraat van de tijdlijn. Het is opgemaakt met een specifieke breedte en kleur, absoluut gepositioneerd om uit te lijnen met het midden van de tijdlijnitems.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Knooppunten: Cirkels, opgemaakt met behulp van de klasse Circle, fungeren als knooppunten op de tijdlijn. Deze bevinden zich absoluut in het midden van elk tijdlijnitem en zijn visueel verschillend met een achtergrondkleur, waardoor ze de belangrijkste punten langs de tijdlijn vormen.
    .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;
    }
  • Datummarkeringen: De datums, opgemaakt met de klasse Timeline__date, worden aan weerszijden van de tijdlijn weergegeven. Hun positionering wisselt af tussen links en rechts voor elk tijdlijnitem, waardoor een gespreide, evenwichtige weergave langs de tijdlijn ontstaat.
    .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;}

Bekijk de volledige set stijlen van de GitHub-opslagplaats in stijl.css.

Na het stylen zou uw component er als volgt uit moeten zien:

Animeren met JavaScript

Gebruik om dit onderdeel te animeren de Intersection Observer-API om tijdlijnitems tijdens het scrollen te animeren. Voeg de volgende code toe aan script.js.

1. Initiële setup

Selecteer eerst alle elementen met de klasse Timeline__item.

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

2. Initiële styling van tijdlijnitems

Stel de initiële dekking van elk item in op 0 (onzichtbaar) en pas een toe CSS-overgang voor vloeiende vervaging.

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

U kunt deze stijlen in het stijlblad instellen, maar dit zou gevaarlijk zijn. Als JavaScript niet werkt, zou deze aanpak uw tijdlijn onzichtbaar maken! Het isoleren van dit gedrag in het JavaScript-bestand is daar een goed voorbeeld van progressieve verbetering.

3. Terugroep van kruispuntwaarnemer

Definieer een fadeInOnScroll-functie om de dekking van items te wijzigen in 1 (zichtbaar) wanneer ze het kijkvenster kruisen.

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

4. Opties voor kruispuntwaarnemers

Stel de opties in voor de waarnemer, waarbij een drempelwaarde van 0,1 aangeeft dat de animatie wordt geactiveerd wanneer 10% van een item zichtbaar is.

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

5. De kruispuntwaarnemer maken en gebruiken

Sluit af door een IntersectionObserver met deze opties te maken en deze op elk tijdlijnitem toe te passen.

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

Het eindresultaat zou er als volgt uit moeten zien:

Best practices voor tijdlijncomponenten

Enkele praktijken waaraan u zich moet houden, zijn onder meer:

  • Optimaliseer uw tijdlijn voor verschillende schermformaten. Leer responsieve ontwerptechnieken om een ​​naadloze gebruikerservaring op alle apparaten te garanderen.
  • Gebruik efficiënte codeermethoden om vloeiende animaties te garanderen.
  • Gebruik semantische HTML, juiste contrastverhoudingen en ARIA-labels voor betere toegankelijkheid.

Breng uw tijdlijn tot leven: een reis in webdesign

Het bouwen van een interactieve tijdlijn gaat niet alleen over het presenteren van informatie; het gaat om het creëren van een boeiende en informatieve ervaring. Door HTML-structuur, CSS-stijl en JavaScript-animaties te combineren, kunt u een tijdlijn maken die uw publiek boeit en tegelijkertijd waardevolle inhoud levert.