Tworzenie interaktywnej osi czasu za pomocą CSS i JavaScript
Kluczowe dania na wynos
- Za pomocą CSS i JavaScript można łatwo zbudować potężną oś czasu.
- Zacznij od naszkicowania struktury HTML osi czasu i wystylizowania elementów osi czasu za pomocą CSS.
- Kontynuuj dodawanie animacji do osi czasu za pomocą JavaScript. Możesz użyć interfejsu API Intersection Observer, aby zanikać elementy osi czasu podczas przewijania.
Osie czasu to potężne narzędzia wizualne, które pomagają użytkownikom nawigować i rozumieć wydarzenia chronologiczne. Dowiedz się, jak stworzyć interaktywną oś czasu, korzystając z dynamicznego duetu CSS i JavaScript.
Budowanie struktury osi czasu
Możesz sprawdzić pełny kod tego projektu w jego repozytorium GitHub .
Na początek opisz strukturę HTML w pliku Index.html . Twórz wydarzenia i daty jako osobne elementy, kładąc podwaliny pod interaktywną oś czasu.
<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>
W tej chwili Twój komponent wygląda następująco:
Wybierz układ swojej osi czasu: pionowy lub poziomy
Projektując interaktywną oś czasu, możesz wybrać styl pionowy lub poziomy. Pionowe osie czasu są łatwe w użyciu, szczególnie na telefonach, ponieważ jest to typowy kierunek przewijania stron internetowych. Jeśli Twoja oś czasu zawiera dużo treści, prawdopodobnie będzie to najwygodniejszy układ.
Poziome osie czasu są jednak atrakcyjne na szerokich ekranach i doskonale nadają się do kreatywnych witryn z mniejszą liczbą szczegółów, które mogą zminimalizować przewijanie na boki. Każdy styl ma swoje zalety, odpowiednie dla różnych typów witryn internetowych i doświadczeń użytkowników.
Stylizuj oś czasu za pomocą CSS
Istnieją trzy typy elementów wizualnych, które będziesz stylizować na osi czasu: linie, węzły i znaczniki daty.
- Linie : środkowa pionowa linia utworzona przy użyciu pseudoelementu Timeline__content::after służy jako szkielet osi czasu. Ma określoną szerokość i kolor i jest umieszczony absolutnie tak, aby był wyrównany ze środkiem elementów osi czasu.
.Timeline__content::after { background-color: var(--clr-purple); content: ""; position: absolute; left: calc(50% - 2px); width: 0.4rem; height: 97%; z-index: -5;} - Węzły : Okręgi, stylizowane przy użyciu klasy Circle, działają jak węzły na osi czasu. Są one umieszczone całkowicie pośrodku każdego elementu osi czasu i wizualnie różnią się kolorem tła, tworząc kluczowe punkty na osi czasu.
.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;} - Znaczniki dat : daty stylizowane przy użyciu klasy Timeline__date są wyświetlane po obu stronach osi czasu. Ich rozmieszczenie zmienia się pomiędzy lewą i prawą stroną dla każdego elementu osi czasu, tworząc rozłożony, zrównoważony wygląd wzdłuż osi czasu.
.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;}
Sprawdź pełny zestaw stylów z repozytorium GitHub w pliku style.css .
Po stylizowaniu komponent powinien wyglądać następująco:
Animacja za pomocą JavaScript
Aby animować ten komponent, użyj interfejsu API Intersection Observer, aby animować elementy osi czasu podczas przewijania. Dodaj następujący kod do script.js .
1. Konfiguracja wstępna
Najpierw zaznacz wszystkie elementy z klasą Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Wstępna stylizacja elementów osi czasu
Ustaw początkowe krycie każdego elementu na 0 (niewidoczny) i zastosuj przejście CSS, aby uzyskać płynne blaknięcie .
timelineItems.forEach((item) => { item.style.opacity = 0; item.style.transition = "opacity 0.6s ease-out";}
Można ustawić te style w arkuszu stylów, ale byłoby to niebezpieczne. Jeśli JavaScript nie zostanie uruchomiony, takie podejście sprawi, że oś czasu stanie się niewidoczna! Wyodrębnienie tego zachowania w pliku JavaScript jest dobrym przykładem stopniowego ulepszania .
3. Oddzwonienie do obserwatora skrzyżowania
Zdefiniuj funkcję fadeInOnScroll, aby zmienić przezroczystość elementów na 1 (widoczne), gdy przecinają się z rzutnią.
const fadeInOnScroll = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } });};
4. Opcje obserwatora skrzyżowania
Ustaw opcje dla obserwatora, ustawiając próg 0,1 wskazujący, że animacja zostanie uruchomiona, gdy widoczne będzie 10% elementu.
const options = { root: null, rootMargin: "0px", threshold: 0.1,}
5. Tworzenie i korzystanie z obserwatora skrzyżowań
Zakończ, tworząc IntersectionObserver z tymi opcjami i stosując go do każdego elementu osi czasu.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => { observer.observe(item);});
Ostateczny wynik powinien wyglądać następująco:
Najlepsze praktyki dotyczące komponentu osi czasu
Niektóre praktyki, których należy przestrzegać, obejmują:
- Zoptymalizuj oś czasu pod kątem różnych rozmiarów ekranów. Poznaj techniki projektowania responsywnego, aby zapewnić płynną obsługę użytkowników na różnych urządzeniach.
- Stosuj wydajne praktyki kodowania, aby zapewnić płynność animacji.
- Dla lepszej dostępności użyj semantycznego kodu HTML , odpowiednich współczynników kontrastu i etykiet ARIA.
Ożywienie Twojej osi czasu: podróż w projektowaniu stron internetowych
Budowanie interaktywnej osi czasu nie polega tylko na prezentowaniu informacji; chodzi o stworzenie wciągającego i pouczającego doświadczenia. Łącząc strukturę HTML, styl CSS i animacje JavaScript, możesz stworzyć oś czasu, która przyciągnie uwagę odbiorców, jednocześnie dostarczając wartościową treść.
Dodaj komentarz