Korzystając z podstawowych koncepcji HTML, CSS i JS, w mgnieniu oka stworzysz atrakcyjną oś czasu.
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 z jego Repozytorium GitHuba.
Na początek opisz strukturę HTML w indeks.html. Twórz wydarzenia i daty jako osobne elementy, kładąc podwaliny pod interaktywną oś czasu.
<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>
W tej chwili Twój komponent wygląda następująco:
Wybierz układ swojej osi czasu: pionowy vs. 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: Centralna pionowa linia utworzona przy użyciu Timeline__content:: po pseudoelemencie 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 daty: 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 styl.css.
Po stylizowaniu komponent powinien wyglądać następująco:
Animacja za pomocą JavaScript
Aby animować ten komponent, użyj interfejs API obserwatora skrzyżowań do animowania elementów osi czasu podczas przewijania. Dodaj następujący kod do skrypt.js.
1. Początkowe ustawienia
Najpierw zaznacz wszystkie elementy z klasą Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Początkowa stylizacja elementów osi czasu
Ustaw początkowe krycie każdego elementu na 0 (niewidoczny) i zastosuj a Przejście CSS zapewniające 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! Dobrym przykładem jest wyizolowanie tego zachowania w pliku JavaScript progresywne ulepszanie.
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 używanie 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.
- Użyj semantycznego HTML, odpowiednie współczynniki kontrastu i etykiety ARIA dla lepszej dostępności.
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ść.
