Interaktív idővonal létrehozása CSS-sel és JavaScripttel

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

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

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

Jelenleg a komponense így néz ki:

Válasszon elrendezést az idővonalhoz: függőleges vagy 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 a telefonokon, mivel a webhelyek általában ebben az irányban 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 elem stílusa van: vonalak, csomópontok és dátumjelzők.

  • Vonalak: A Timeline__content::after pszeudoelem segítségével létrehozott központi függőleges vonal szolgál az idővonal gerinceként. 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 jelennek meg. 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 repó a style.css formátumban.

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 az Intersection Observer API-t az idővonal elemeinek animálásához görgetés közben. Adja hozzá a következő kódot a script.js fájlhoz.

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 alkalmazzon CSS-átmenetet a sima fakuláshoz.

 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 a fokozatos fejlesztésre.

3. Kereszteződés-megfigyelő visszahívása

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.
  • A jobb hozzáférhetőség érdekében használjon szemantikus HTML-t, megfelelő kontrasztarányt és ARIA-címkéket.

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.