Käyttämällä HTML: n, CSS: n ja JS: n peruskäsitteitä saat houkuttelevan aikajanan valmiiksi hetkessä.
Avaimet takeawayt
- Tehokas aikajana on helppo rakentaa CSS: n ja JavaScriptin avulla.
- Aloita hahmottelemalla aikajanan HTML-rakenne ja muotoilemalla aikajanan elementit CSS: llä.
- Jatka animaation lisäämistä aikajanalle JavaScriptin avulla. Voit käyttää Intersection Observer APIa häivyttämään aikajanan kohteita vierityksen aikana.
Aikajanat ovat tehokkaita visuaalisia työkaluja, jotka auttavat käyttäjiä navigoimaan ja ymmärtämään kronologisia tapahtumia. Tutustu interaktiivisen aikajanan luomiseen käyttämällä dynaamista CSS: n ja JavaScriptin yhdistelmää.
Aikajanarakenteen rakentaminen
Voit tarkistaa tämän projektin täydellisen koodin siitä GitHub-arkisto.
Aloita hahmottelemalla HTML-rakenne index.html. Luo tapahtumat ja päivämäärät erillisinä komponentteina, mikä luo perustan interaktiiviselle aikajanalle.
<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>
Tällä hetkellä komponenttisi näyttää tältä:
Valitse aikajanallesi asettelu: Pysty vs. Vaakasuora
Kun suunnittelet interaktiivista aikajanaa, voit valita joko pysty- tai vaakasuuntaisen tyylin. Pystysuuntaiset aikajanat ovat helppokäyttöisiä varsinkin puhelimissa, koska tämä on tyypillinen suunta, johon verkkosivustot vierivät. Jos aikajanallasi on paljon sisältöä, tämä on luultavasti kätevin asettelu.
Vaakasuuntaiset aikajanat ovat kuitenkin houkuttelevia leveillä näytöillä ja sopivat hyvin luoville sivustoille, joissa on vähemmän yksityiskohtia, jotka voivat minimoida vierityksen sivulta toiselle. Jokaisella tyylillä on etunsa, jotka sopivat erilaisille verkkosivustoille ja käyttökokemuksiin.
Muotoile aikajanaa CSS: n avulla
Aikajanalla on kolmenlaisia visuaalisia elementtejä: viivat, solmut ja päivämäärämerkit.
-
Linjat: Keskimmäinen pystyviiva, joka on luotu käyttämällä pseudoelementin jälkeen Timeline__content::-elementtiä, toimii aikajanan selkärankana. Se on muotoiltu tietyllä leveydellä ja väreillä, ja se on sijoitettu täysin linjaan aikajanan kohteiden keskikohdan kanssa.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} -
Solmut: Piirit, jotka on muotoiltu ympyräluokan avulla, toimivat solmuina aikajanalla. Nämä sijoitetaan ehdottomasti jokaisen aikajanakohteen keskelle ja erottuvat visuaalisesti taustavärillä, mikä muodostaa aikajanan avainpisteet.
.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;
} -
Päivämäärämerkit: Päivämäärät, jotka on tyylitelty käyttämällä Timeline__date-luokkaa, näkyvät aikajanan kummallakin puolella. Niiden sijoittelu vuorottelee vasemmalle ja oikealle kullekin aikajanan kohteelle luoden porrastetun, tasapainoisen ilmeen aikajanalle.
.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;}
Katso kaikki tyylit osoitteesta GitHub repo sisään tyyli.css.
Muotoilun jälkeen komponenttisi pitäisi näyttää tältä:
Animointi JavaScriptillä
Animoi tämä komponentti käyttämällä Intersection Observer API animoidaksesi aikajanan kohteita rullaamalla. Lisää seuraava koodi script.js.
1. Alkuasennus
Valitse ensin kaikki elementit, joiden luokka on Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Aikajanan kohteiden alkuperäinen muotoilu
Aseta kunkin kohteen alkupeittävyydeksi 0 (näkymätön) ja käytä a CSS-siirtymä tasaiseen häipymiseen.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Voit asettaa nämä tyylit tyylisivulle, mutta sen tekeminen olisi vaarallista. Jos JavaScript ei toimi, tämä lähestymistapa jättäisi aikajanasi näkymättömäksi! Tämän toiminnan eristäminen JavaScript-tiedostossa on hyvä esimerkki progressiivinen parannus.
3. Risteyksen tarkkailijan takaisinsoitto
Määritä fadeInOnScroll-funktio muuttaaksesi kohteiden peittävyyden arvoon 1 (näkyvä), kun ne leikkaavat näkymän.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Risteystarkkailijan asetukset
Aseta tarkkailijan asetukset. Kynnysarvo 0,1 osoittaa, että animaatio käynnistyy, kun 10 % kohteesta on näkyvissä.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Risteystarkkailijan luominen ja käyttö
Viimeistele luomalla IntersectionObserver näillä vaihtoehdoilla ja soveltamalla sitä jokaiseen aikajanan kohteeseen.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
Lopputuloksen pitäisi näyttää tältä:
Aikajanakomponenttien parhaat käytännöt
Joitakin käytäntöjä, joita on noudatettava, ovat:
- Optimoi aikajanasi eri näyttökokoja varten. Opi responsiivisia suunnittelutekniikoita varmistaaksesi saumattoman käyttökokemuksen kaikilla laitteilla.
- Käytä tehokkaita koodauskäytäntöjä varmistaaksesi sujuvat animaatiot.
- Käytä semanttista HTML: ää, oikeat kontrastisuhteet ja ARIA-tarrat helpottamaan käytettävyyttä.
Herätä aikajanasi henkiin: matka web-suunnitteluun
Interaktiivisen aikajanan rakentaminen ei ole vain tiedon esittämistä; kyse on kiinnostavan ja informatiivisen kokemuksen luomisesta. Yhdistämällä HTML-rakennetta, CSS-tyyliä ja JavaScript-animaatioita voit luoda aikajanan, joka valloittaa yleisösi ja tarjoaa samalla arvokasta sisältöä.
