A HTML, CSS és JS alapfogalmait használva egy vonzó idővonalat kaphat, amely pillanatok alatt elindul.

Kulcs elvitelek

  • Egy hatékony idővonalat könnyű felépíteni CSS és JavaScript használatával.
  • Kezdje az idővonal HTML-szerkezetének felvázolásával, és az idővonal elemeinek stílusával CSS segítségével.
  • Továbbra is adjon hozzá animációt az idővonalhoz JavaScript használatával. Használhatja az Intersection Observer API-t az idővonal elemeinek halványítására görgetés közben.

Az idővonalak hatékony vizuális eszközök, amelyek segítenek a felhasználóknak navigálni és megérteni az időrendi eseményeket. Fedezze fel, hogyan hozhat létre interaktív idővonalat a CSS és a JavaScript dinamikus kettősével.

Az idővonal-struktúra felépítése

Megtekintheti a projekt teljes kódját GitHub adattár.

Kezdésként vázolja fel a HTML szerkezetét index.html. Hozzon létre eseményeket és dátumokat különálló összetevőkként, megalapozva ezzel az interaktív idővonalat.

<body>
<sectionclass="timeline-section">
<divclass="container">





instagram viewer



<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>

Jelenleg a komponense így néz ki:

Válasszon elrendezést az idővonalhoz: Függőleges vs. Vízszintes

Interaktív idővonal tervezésekor választhat függőleges vagy vízszintes stílust. A függőleges idővonalak használata egyszerű, különösen telefonokon, mivel ez a tipikus irány, amelybe a webhelyek görgetnek. Ha az idővonal sok tartalommal rendelkezik, valószínűleg ez lesz a legkényelmesebb elrendezés.

A vízszintes idővonalak azonban vonzóak a széles képernyőkön, és kiválóak a kevesebb részletet tartalmazó kreatív webhelyekhez, amelyek minimalizálhatják az oldalról a másikra való görgetést. Minden stílusnak megvannak a maga előnyei, amelyek különböző típusú webhelyekhez és felhasználói élményekhez alkalmasak.

Stílusosítsa az idővonalat CSS-sel

Az idővonalhoz háromféle vizuális elemet ad meg: vonalak, csomópontok és dátumjelzők.

  • Vonalak: Az idővonal gerinceként egy központi függőleges vonal szolgál, amelyet a Timeline__content:: pszeudoelem után hoznak létre. Meghatározott szélességgel és színnel van kialakítva, és abszolút úgy van elhelyezve, hogy igazodjon az idővonal elemeinek közepéhez.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Csomópontok: A körosztály segítségével kialakított körök csomópontokként működnek az idővonalon. Ezek abszolút az egyes idővonal-elemek közepén helyezkednek el, és vizuálisan megkülönböztethetők egy háttérszínnel, amelyek a kulcspontokat alkotják az idővonal mentén.
    .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;
    }
  • Dátumjelzők: A Timeline__date osztály használatával stílusos dátumok az idővonal mindkét oldalán megjelennek. Elhelyezésük bal és jobb között váltakozik minden egyes idővonal-elemnél, ami lépcsőzetes, kiegyensúlyozott megjelenést hoz létre az idővonal mentén.
    .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;}

Tekintse meg a stílusok teljes készletét a GitHub repo be stílus.css.

A formázás után az összetevőnek így kell kinéznie:

Animálás JavaScripttel

Az összetevő animálásához használja a az Intersection Observer API az idővonal elemeinek animálásához görgetés közben. Adja hozzá a következő kódot script.js.

1. Kezdeti beállítás

Először jelölje ki az összes elemet az Idővonal__elem osztályával.

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

2. Az idővonal elemeinek kezdeti stílusa

Állítsa az egyes elemek kezdeti átlátszatlanságát 0-ra (láthatatlan), és alkalmazza a CSS átmenet a sima fadingért.

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

Ezeket a stílusokat beállíthatja a stíluslapon, de ez veszélyes lenne. Ha a JavaScript nem fut, akkor ez a megközelítés láthatatlanná tenné az idővonalat! Ennek a viselkedésnek a JavaScript-fájlban való elkülönítése jó példa erre progresszív fokozás.

3. Kereszteződésfigyelő visszahívás

Határozzon meg egy fadeInOnScroll függvényt az elemek átlátszatlanságának 1-re (látható) módosításához, amikor metszik a nézetablakot.

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

4. Kereszteződés-megfigyelő opciók

Állítsa be a megfigyelő beállításait, 0,1-es küszöbértékkel, amely azt jelzi, hogy az animáció akkor aktiválódik, amikor egy elem 10%-a látható.

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

5. Az Intersection Observer létrehozása és használata

A befejezéshez hozzon létre egy IntersectionObservert ezekkel a beállításokkal, és alkalmazza azt minden idővonal elemre.

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

A végeredménynek így kell kinéznie:

Az idővonal-komponens bevált gyakorlatai

Néhány betartandó gyakorlat a következők:

  • Optimalizálja idővonalát a különböző képernyőméretekhez. Tanuljon meg reszponzív tervezési technikákat, hogy zökkenőmentes felhasználói élményt biztosítson minden eszközön.
  • Használjon hatékony kódolási gyakorlatokat a gördülékeny animációk biztosításához.
  • Használjon szemantikus HTML-t, megfelelő kontrasztarányok és ARIA címkék a jobb hozzáférhetőség érdekében.

Keltse életre idővonalát: utazás a webdesignban

Az interaktív idővonal felépítése nem csak az információk bemutatásából áll; ez egy vonzó és informatív élmény megteremtéséről szól. A HTML-struktúra, a CSS-stílus és a JavaScript-animációk kombinálásával olyan idővonalat hozhat létre, amely magával ragadja közönségét, miközben értékes tartalmat nyújt.