Skapa en interaktiv tidslinje med CSS och JavaScript
Viktiga lärdomar
En övertygande tidslinje kan enkelt konstrueras med hjälp av CSS och JavaScript.
Börja med att organisera den tidsmässiga utvecklingen av händelser genom att skapa en HTML-struktur som omfattar olika komponenter som rubriker, stycken, bilder och andra multimedietillgångar. Använd dessutom Cascading Style Sheets (CSS) för att ge dessa komponenter estetiska egenskaper och därigenom skapa ett visuellt tilltalande gränssnitt som förbättrar användarupplevelsen när man navigerar i tidslinjen.
javascript// Ställ in korsningsobservatör för tidslinjeelementconst observer = new IntersectionObserver(entries => {entries.forEach(entry => {// Om elementet är synligt, tona in det med CSS-övergångif (entry.isIntersecting) {entry.target.classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});// Lägg till klassen ‘fade-in’ till alla tidslinjeelement initialtconst timelineItems = document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item => item.classList.add(‘fade-in’));// Observera varje tidslinjeelementconst timelineObserved
Tidslinjer fungerar som effektiva visuella hjälpmedel för navigering i och förståelse av kronologiska skeenden. Upptäck hur man konstruerar en interaktiv tidslinje med hjälp av CSS och JavaScript, som tillsammans utgör en kraftfull kombination i detta avseende.
Bygga tidslinjestrukturen
Du kan kolla in den fullständiga koden för detta projekt från dess GitHub-förvar .
För att kunna börja är det nödvändigt att etablera HTML-arkitekturen i filen “index.html”. Detta innebär att händelser och möten avgränsas som enskilda element, vilket ger en grund för en sammankopplad tidslinje som underlättar användarinteraktion.
<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>
För närvarande kan utseendet på din komponent beskrivas på följande sätt:
Välj en layout för din tidslinje: Vertikal vs. horisontell
När man skapar en interaktiv tidslinje kan man välja antingen en vertikal eller horisontell orientering. Den förstnämnda är lättare att använda, särskilt på mobila enheter, eftersom den är anpassad till konventionellt scrollbeteende. Dessutom, om tidslinjen innehåller ett överflöd av information, är det rimligt att en sådan konfiguration skulle ge maximal bekvämlighet.
Horisontella tidslinjer är visuellt fängslande när de visas på stora skärmar, särskilt i fall där det krävs minimalt med skrollning i sidled. Dessa stilar passar bra för kreativa webbplatser vars innehåll kräver mindre invecklade detaljer.Omvänt kan vertikala tidslinjer passa bättre för mer strukturerade eller informationstäta plattformar där omfattande bläddring är nödvändig. Valet mellan dessa två alternativ beror i slutändan på de specifika behoven och preferenserna hos både designers och användare.
Styla tidslinjen med CSS
är linjesegmenten, nodrepresentationerna och tidsindikatorerna.
⭐ Linjer : En central vertikal linje, skapad med hjälp av pseudoelementet Timeline__content::after, fungerar som tidslinjens ryggrad. Den är utformad med en specifik bredd och färg, placerad absolut för att anpassa sig till mitten av tidslinjeobjekten.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
}
⭐ Noder : Cirklar, stylade med hjälp av cirkelklassen, fungerar som noder på tidslinjen. Dessa är absolut placerade i mitten av varje tidslinjeobjekt och är visuellt distinkta med en bakgrundsfärg som bildar nyckelpunkterna längs 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;
}
⭐ Datummarkörer : Datumen, utformade med klassen Timeline__date, visas på vardera sidan av tidslinjen. Deras placering växlar mellan vänster och höger för varje tidslinjeobjekt, vilket skapar ett förskjutet, balanserat utseende längs 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;}
Kolla in hela uppsättningen stilar från GitHub repo i style.css .
När de nödvändiga stilarna har tillämpats på HTML- och CSS-komponenterna på en webbsida kommer slutresultatet att likna en välstrukturerad layout som är visuellt tilltalande och lätt att navigera. Designen kan innehålla olika element som bilder, textrutor, tabeller, formulär och knappar, alla arrangerade på ett organiserat sätt för att underlätta användarens interaktion med innehållet. Dessutom kan användningen av färgscheman, typografi och vita ytor bidra till att skapa en harmonisk visuell upplevelse för användare som surfar på webbplatsen.
Animering med JavaScript
Använd Intersection Observer API för att animera tidslinjeposter vid rullning genom att införliva följande kodavsnitt i filen script.js för att göra detta element mer levande:
Initial inställning
Välj först alla komponenter som har klassattributet “Timeline__item”.
const timelineItems = document.querySelectorAll(".Timeline__item");
Initial styling av tidslinjeobjekt
Till att börja med ställer du in alfavärdet för varje element till noll, vilket gör dem osynliga. Använd sedan en CSS-övergång för att uppnå en sömlös blekningseffekt enligt följande:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Genom att införliva utformningen av tidslinjen i JavaScript-filen, snarare än i stilmallen, kan man effektivt implementera progressiv förbättring.Denna strategi säkerställer att även om JavaScript inte körs korrekt, kommer den grundläggande strukturen och layouten för tidslinjen att förbli synlig, vilket ger användarna en viss nivå av funktionalitet oavsett eventuella tekniska problem som kan uppstå.
Intersection Observer Callback
Skapa en fadeInOnScroll funktion som ändrar opaciteten för element till ett, vilket gör dem synliga, när de kommer i kontakt med tittarens skärm.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
Intersection Observer Options
Konfigurera observatören genom att ställa in dess parametrar så att de inkluderar ett tröskelvärde på 0,1, vilket anger att animeringen kommer att utlösas när 10 % av ett objekt är synligt.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
Skapa och använda Intersection Observer
Avsluta med att konstruera ett IntersectionObserver-objekt som innehåller de angivna parametrarna och bifoga det till varje instans av en tidslinjekomponent.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
Det slutliga resultatet bör se ut så här:
Din webbläsare stöder inte videotaggen.
Bästa praxis för tidslinjekomponenter
Några praxis att följa inkluderar:
Förbättra layoutens anpassningsförmåga genom att implementera responsiva designprinciper, vilket möjliggör en konsekvent och oavbruten användarupplevelse på olika skärmar och enheter genom noggrann hänsyn till proportion, skala, flytande rutnät, bilder, mediafrågor och mobile-first-metoder.
Att använda effektiva programmeringstekniker är avgörande för att säkerställa sömlös animeringsprestanda.
Använda semantiskt lämpliga HTML-element, säkerställa optimala kontrastförhållanden mellan text och bakgrundsfärger och använda ARIA-attribut för att förbättra den övergripande tillgängligheten för ditt webbinnehåll.
Ge liv åt din tidslinje: En resa i webbdesign
Att skapa en interaktiv tidslinje handlar inte bara om att presentera data, utan snarare om att skapa en fängslande och upplysande upplevelse för betraktaren. Genom att använda HTML-arkitektur, CSS-konst och JavaScript-animeringstekniker kan man utveckla en fängslande tidslinje som inte bara fångar publikens uppmärksamhet utan också förmedlar viktig information på ett engagerande sätt.