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

Tartalomjegyzék

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:

A No-Fluff ütemterv az etikus hackerré váláshoz [2023]

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.

Disney Plus fiók frissítése

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.

Miért érdemes letöltenie iPhone és iPad alkalmazásait?

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.

Ön szerint?