Een interactieve tijdlijn maken met CSS en JavaScript
Belangrijkste punten
Een boeiende tijdlijn kan moeiteloos worden opgebouwd met CSS en JavaScript.
Begin met het organiseren van de temporele progressie van gebeurtenissen door het maken van een HTML-structuur, die verschillende componenten bevat zoals koppen, paragrafen, afbeeldingen en andere multimediamiddelen. Gebruik daarnaast Cascading Style Sheets (CSS) om deze componenten esthetische eigenschappen te geven, zodat een visueel aantrekkelijke interface ontstaat die de gebruikerservaring verbetert tijdens het navigeren door de tijdlijn.
javascript// Kruispuntwaarnemer instellen voor tijdlijnelementenconst observer = new IntersectionObserver(entries => {entries.forEach(entry => {/ Als element zichtbaar is, vervaag het dan met CSS-overgangif (entry.isIntersecting) {entry.target.classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});// Voeg ‘fade-in’ klasse toe aan alle tijdlijnelementen initieelconst timelineItems = document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item => item.classList.add(‘fade-in’));// Observeer elk tijdlijnelementconst timelineObserved
Tijdlijnen dienen als effectieve visuele hulpmiddelen voor het navigeren en begrijpen van chronologische gebeurtenissen. Ontdek hoe je een interactieve tijdlijn construeert door CSS en JavaScript te gebruiken, die samen een krachtige combinatie vormen in dit opzicht.
De tijdlijnstructuur bouwen
Je kunt de volledige code voor dit project bekijken in de GitHub repository .
Om te beginnen is het nodig om de HTML-architectuur vast te stellen in het bestand “index.html”. Dit omvat het afbakenen van gebeurtenissen en afspraken als individuele elementen, waardoor een basis wordt gelegd voor een onderling verbonden tijdlijn die gebruikersinteractie vergemakkelijkt.
<body>
<section class="timeline-section">
<div class="container">
<div class="Timeline__header">
<h2>Timeline</h2>
<p class="heading--title">
Here is the breakdown of the time we anticipate <br />
using for the upcoming event.
</p>
</div>
<div class="Timeline__content">
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p>
<span class="circle">1</span>
</div>
<h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p>
<span class="circle">2</span>
</div>
<h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
<!-- More Items -->
</div>
</div>
</section>
</body>
Op dit moment kan het uiterlijk van je component als volgt worden beschreven:
Kies een lay-out voor uw tijdlijn: Verticaal vs. Horizontaal
Bij het maken van een interatieve tijdlijn kun je kiezen voor een verticale of horizontale oriëntatie. De eerste biedt gebruiksgemak, vooral op mobiele apparaten, omdat deze is afgestemd op conventioneel scrollgedrag. Als de tijdlijn een overvloed aan informatie bevat, is het bovendien logisch dat een dergelijke configuratie maximaal gebruiksgemak biedt.
Horizontale tijdlijnen blijken visueel boeiend te zijn wanneer ze worden weergegeven op grote schermen, vooral in gevallen waar een minimale hoeveelheid zijdelings scrollen vereist is. Deze stijlen zijn zeer geschikt voor creatieve websites waarvan de inhoud minder ingewikkelde details vereist.Omgekeerd kunnen verticale tijdlijnen beter passen op meer gestructureerde of informatie-intensieve platformen waar uitgebreid browsen nodig is. De keuze tussen deze twee alternatieven hangt uiteindelijk af van de specifieke behoeften en voorkeuren van zowel ontwerpers als gebruikers.
De tijdlijn stylen met CSS
de lijnsegmenten, knooppuntweergaven en tijdsindicatoren zijn.
⭐ Lijnen : Een centrale verticale lijn, gemaakt met behulp van het Timeline__content::after pseudo-element, dient als ruggengraat van de tijdlijn. Het is vormgegeven 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, vormgegeven met behulp van de cirkel klasse, fungeren als knooppunten op de tijdlijn. Deze zijn absoluut gepositioneerd in het midden van elk tijdlijnitem en zijn visueel duidelijk met een achtergrondkleur, en vormen de sleutelpunten langs de tijdlijn.
.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, vormgegeven met behulp van de klasse Timeline__date, worden aan weerszijden van de tijdlijn weergegeven. Ze worden afwisselend links en rechts gepositioneerd voor elk tijdlijnitem, waardoor een verspringend, gebalanceerd uiterlijk ontstaat langs de tijdlijn.
.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 repo in style.css .
Nadat de benodigde stijlen zijn toegepast op de HTML- en CSS-componenten van een webpagina, ziet het eindresultaat eruit als een goed gestructureerde lay-out die visueel aantrekkelijk en gemakkelijk te navigeren is. Het ontwerp kan verschillende elementen bevatten zoals afbeeldingen, tekstvakken, tabellen, formulieren en knoppen, allemaal gerangschikt op een georganiseerde manier om de interactie van de gebruiker met de inhoud te vergemakkelijken. Daarnaast kan het gebruik van kleurenschema’s, typografie en witruimte bijdragen aan het creëren van een harmonieuze visuele ervaring voor gebruikers die de website bekijken.
Animeren met JavaScript
Om dit element te verlevendigen, gebruikt u de Intersection Observer API om tijdlijnitems te animeren bij het scrollen door het volgende codefragment op te nemen in het bestand script.js :
Initial Setup
Kies in eerste instantie alle componenten die het class attribuut “Timeline__item” bezitten.
const timelineItems = document.querySelectorAll(".Timeline__item");
Eerste styling van tijdlijnitems
Om te beginnen stelt u de alpha-waarde van elk element in op nul, waardoor ze onzichtbaar worden. Gebruik vervolgens een CSS-overgang om een naadloos vervagingseffect te bereiken:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Door de styling voor de tijdlijn op te nemen in het JavaScript-bestand in plaats van in het stylesheet, kan progressieve verbetering effectief worden geïmplementeerd.Deze strategie zorgt ervoor dat zelfs als het JavaScript niet goed wordt uitgevoerd, de basisstructuur en -lay-out van de tijdlijn zichtbaar blijven, zodat gebruikers over een zekere mate van functionaliteit beschikken, ongeacht eventuele technische problemen.
Intersection Observer Callback
Maak een fadeInOnScroll functie die de ondoorzichtigheid van elementen wijzigt naar één, waardoor ze zichtbaar worden wanneer ze in contact komen met het scherm van de kijker.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
Intersection Observer Options
Configureer de observer door de parameters in te stellen met een drempelwaarde van 0,1, wat aangeeft dat de animatie wordt geactiveerd als 10% van een object zichtbaar is.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
De snijpuntwaarnemer maken en gebruiken
Sluit af door een object IntersectionObserver te maken met de gespecificeerde parameters en het toe te voegen aan elke instantie van een tijdlijncomponent.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
Het uiteindelijke resultaat zou er zo uit moeten zien:
Uw browser ondersteunt de videotag niet.
Beste praktijken voor tijdlijncomponenten
Enkele praktijken waar je je aan moet houden:
Verbeter de aanpasbaarheid van je lay-out door responsieve ontwerpprincipes te implementeren, die een consistente en ononderbroken gebruikerservaring op verschillende schermen en apparaten mogelijk maken door zorgvuldig rekening te houden met proportie, schaal, vloeiende rasters, afbeeldingen, media queries en mobile-first benaderingen.
Het gebruik van effectieve programmeertechnieken is cruciaal voor het garanderen van naadloze animatieprestaties.
Gebruik semantisch geschikte HTML-elementen, zorg voor optimale contrastverhoudingen tussen tekst en achtergrondkleuren en maak gebruik van ARIA-attributen om de algemene toegankelijkheid van uw webinhoud te verbeteren.
Breng uw tijdlijn tot leven: A Journey in Web Design
Het maken van een interactieve tijdlijn gaat verder dan alleen het presenteren van gegevens; het gaat om het creëren van een boeiende en verhelderende ontmoeting voor de kijker. Door gebruik te maken van HTML-architectuur, CSS-kunst en JavaScript-animatietechnieken kan een boeiende tijdlijn worden ontwikkeld die niet alleen de aandacht van het publiek vasthoudt, maar ook essentiële informatie op een boeiende manier overbrengt.