Indholdsfortegnelse
Nøgle takeaways
- En kraftfuld tidslinje er nem at bygge ved hjælp af CSS og JavaScript.
- Start med at skitsere tidslinjens HTML-struktur og stil tidslinjeelementerne med CSS.
- Fortsæt med at tilføje animation til tidslinjen ved hjælp af JavaScript. Du kan bruge Intersection Observer API til at tone tidslinjeelementer ind under rulning.
Tidslinjer er kraftfulde visuelle værktøjer, der hjælper brugere med at navigere og forstå kronologiske begivenheder. Udforsk, hvordan du opretter en interaktiv tidslinje ved hjælp af den dynamiske duo af CSS og JavaScript.
Opbygning af tidslinjestrukturen
For at begynde skal du skitsere HTML-strukturen i index.html. Opret begivenheder og datoer som separate komponenter, der lægger grundlaget for den interaktive tidslinje.
<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>
</div>
</div>
</section>
</body>
I øjeblikket ser din komponent sådan ud:
Vælg et layout til din tidslinje: Lodret vs. Vandret
Når du designer en interaktiv tidslinje, kan du vælge enten en lodret eller vandret stil. Lodrette tidslinjer er nemme at bruge, især på telefoner, da det er den typiske retning, som hjemmesider ruller i. Hvis din tidslinje har meget indhold, vil dette nok være det mest bekvemme layout.
Vandrette tidslinjer er dog tiltalende på brede skærme og er gode til kreative websteder med færre detaljer, der kan minimere side-til-side-rulning. Hver stil har sine frynsegoder, egnet til forskellige typer websteder og brugeroplevelser.
Style tidslinjen med CSS
Der er tre typer visuelle elementer, du vil style til tidslinjen: linjer, noder og datomarkører.
- Linjer: En central lodret linje, oprettet ved hjælp af Timeline__content::after pseudo-elementet, fungerer som rygraden i tidslinjen. Det er stylet med en specifik bredde og farve, placeret helt for at flugte med midten af tidslinjeelementerne.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} - Noder: Cirkler, stylet ved hjælp af cirkelklassen, fungerer som noder på tidslinjen. Disse er absolut placeret i midten af hvert tidslinjeelement og er visuelt forskellige med en baggrundsfarve, der danner nøglepunkterne langs tidslinjen.
.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;
} - Datomarkører: Datoerne, der er stilet med Timeline__date-klassen, vises på hver side af tidslinjen. Deres placering skifter mellem venstre og højre for hvert tidslinjeelement, hvilket skaber et forskudt, afbalanceret udseende langs tidslinjen.
.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;}
Tjek det fulde sæt af styles fra GitHub repo i style.css.
Efter styling skal din komponent se sådan ud:
Animering med JavaScript
For at animere denne komponent skal du bruge Intersection Observer API til at animere tidslinjeelementer på scroll. Tilføj følgende kode til script.js.
1. Indledende opsætning
Først skal du vælge alle elementer med klassen Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Indledende styling af tidslinjeelementer
Indstil den oprindelige opacitet for hvert element til 0 (usynlig), og anvend en CSS-overgang for jævn fading.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Du kan indstille disse stilarter i typografiarket, men det ville være farligt at gøre det. Hvis JavaScript ikke kører, vil denne tilgang efterlade din tidslinje usynlig! At isolere denne adfærd i JavaScript-filen er et godt eksempel på progressiv forbedring.
3. Intersection Observer Callback
Definer en fadeInOnScroll-funktion for at ændre opaciteten af elementer til 1 (synlig), når de krydser visningsporten.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Intersection Observer Options
Indstil indstillingerne for observatøren med en tærskel på 0,1, der angiver, at animationen udløses, når 10 % af et element er synligt.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Oprettelse og brug af Intersection Observer
Afslut ved at oprette en IntersectionObserver med disse muligheder og anvende den på hvert tidslinjeelement.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
Det endelige resultat skulle se sådan ud:
Best Practices for tidslinjekomponent
Nogle fremgangsmåder, der skal overholdes, omfatter:
- Optimer din tidslinje til forskellige skærmstørrelser. Lær responsive designteknikker for at sikre en problemfri brugeroplevelse på tværs af enheder.
- Brug effektiv kodningspraksis for at sikre jævne animationer.
- Brug semantisk HTML, korrekte kontrastforhold og ARIA-etiketter for bedre tilgængelighed.
Bring din tidslinje til live: En rejse i webdesign
Opbygning af en interaktiv tidslinje handler ikke kun om at præsentere information; det handler om at skabe en engagerende og informativ oplevelse. Ved at kombinere HTML-struktur, CSS-styling og JavaScript-animationer kan du lave en tidslinje, der fanger dit publikum, mens du leverer værdifuldt indhold.