Tworzenie interaktywnej osi czasu za pomocą CSS i JavaScript
Kluczowe wnioski
Atrakcyjną oś czasu można bez wysiłku skonstruować przy użyciu CSS i JavaScript.
Rozpocznij od zorganizowania czasowego postępu wydarzeń poprzez utworzenie struktury HTML, obejmującej różne elementy, takie jak nagłówki, akapity, obrazy i inne zasoby multimedialne. Dodatkowo wykorzystaj kaskadowe arkusze stylów (CSS), aby nadać tym komponentom właściwości estetyczne, tworząc w ten sposób atrakcyjny wizualnie interfejs, który poprawia wrażenia użytkownika podczas nawigacji po osi czasu.
javascript// Set up intersection observer for timeline elementsconst observer = new IntersectionObserver(entries => {entries.forEach(entry => {// If element is visible, fade in with CSS transitionif (entry.isIntersecting) {entry.target.classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});// Dodaj klasę ‘fade-in’ do wszystkich elementów osi czasu początkowoconst timelineItems = document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item => item.classList.add(‘fade-in’));// Obserwuj każdy element osi czasuconst timelineObserved
Osie czasu służą jako skuteczne pomoce wizualne do nawigacji i zrozumienia zdarzeń chronologicznych. Dowiedz się, jak skonstruować interaktywną oś czasu za pomocą CSS i JavaScript, które razem tworzą potężną kombinację w tym zakresie.
Budowanie struktury osi czasu
Możesz sprawdzić pełny kod tego projektu z jego repozytorium GitHub .
Aby rozpocząć, konieczne jest ustanowienie architektury HTML w pliku “index.html”. Obejmuje to określenie zdarzeń i terminów jako poszczególnych elementów, zapewniając w ten sposób podstawę dla wzajemnie połączonej osi czasu, która ułatwia interakcję użytkownika.
<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>
Obecnie wygląd komponentu można opisać następująco:
Pick a Layout for Your Timeline: Pionowa vs. Pozioma
Tworząc interaktywną oś czasu, można zdecydować się na orientację pionową lub poziomą. Ta pierwsza zapewnia łatwość użytkowania, szczególnie na urządzeniach mobilnych, biorąc pod uwagę jej dostosowanie do konwencjonalnego zachowania przewijania. Co więcej, jeśli oś czasu zawiera mnóstwo informacji, jest oczywiste, że taka konfiguracja zapewni maksymalną wygodę.
Poziome osie czasu okazują się wizualnie urzekające, gdy są wyświetlane na dużych ekranach, szczególnie w przypadkach, gdy wymagana jest minimalna ilość przewijania bocznego. Style te dobrze nadają się do kreatywnych stron internetowych, których zawartość wymaga mniej skomplikowanych szczegółów.I odwrotnie, pionowe osie czasu mogą lepiej pasować do bardziej ustrukturyzowanych lub gęstych informacji platform, w których konieczne jest intensywne przeglądanie. Wybór między tymi dwoma alternatywami zależy ostatecznie od konkretnych potrzeb i preferencji zarówno projektantów, jak i użytkowników.
Style the Timeline With CSS
będących segmentami linii, reprezentacjami węzłów i wskaźnikami czasu.
⭐ Linie: Centralna pionowa linia, utworzona przy użyciu pseudoelementu Timeline__content::after, służy jako szkielet osi czasu. Jest stylizowana z określoną szerokością i kolorem, pozycjonowana absolutnie w celu wyrównania 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 okręgu, działają jako węzły na osi czasu. Są one bezwzględnie umieszczane w środku każdego elementu osi czasu i wyróżniają się wizualnie 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 pozycjonowanie zmienia się od lewej do prawej dla każdego elementu osi czasu, tworząc naprzemienny, 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 style.css .
Po zastosowaniu niezbędnych stylów do komponentów HTML i CSS strony internetowej, ostateczny wynik będzie przypominał dobrze zorganizowany układ, który jest atrakcyjny wizualnie i łatwy w nawigacji. Projekt może zawierać różne elementy, takie jak obrazy, pola tekstowe, tabele, formularze i przyciski, wszystkie ułożone w zorganizowany sposób, aby ułatwić interakcję użytkownika z treścią. Dodatkowo, użycie schematów kolorów, typografii i białej przestrzeni może przyczynić się do stworzenia harmonijnych wrażeń wizualnych dla użytkowników przeglądających witrynę.
Animowanie za pomocą JavaScript
Aby ożywić ten element, wykorzystaj Intersection Observer API w celu animowania wpisów na osi czasu podczas przewijania, włączając następujący fragment kodu w pliku script.js :
Konfiguracja początkowa
Początkowo wybierz wszystkie komponenty posiadające atrybut klasy “Timeline__item”.
const timelineItems = document.querySelectorAll(".Timeline__item");
Początkowa stylizacja elementów osi czasu
Na początek ustaw wartość alfa każdego elementu na zero, co uczyni je niewidocznymi. Następnie użyj przejścia CSS, aby uzyskać płynny efekt zanikania w następujący sposób:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Poprzez włączenie stylizacji osi czasu w pliku JavaScript, a nie w arkuszu stylów, można skutecznie wdrożyć progresywne ulepszanie.Strategia ta zapewnia, że nawet jeśli JavaScript nie wykona się poprawnie, podstawowa struktura i układ osi czasu pozostaną widoczne, zapewniając użytkownikom pewien poziom funkcjonalności niezależnie od wszelkich problemów technicznych, które mogą się pojawić.
Intersection Observer Callback
Create a fadeInOnScroll function that modifies the opacity of elements to one, rendering them visible, as they come into contact with the viewer’s screen.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
Intersection Observer Options
Skonfiguruj obserwatora, ustawiając jego parametry tak, aby zawierały wartość progową 0,1, która wskazuje, że animacja zostanie uruchomiona, gdy widoczne będzie 10% obiektu.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
Tworzenie i używanie obserwatora przecięcia
Zakończ, konstruując obiekt IntersectionObserver zawierający określone parametry i dołączając go do każdego wystąpienia komponentu osi czasu.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
Wynik końcowy powinien wyglądać następująco:
Twoja przeglądarka nie obsługuje tagu wideo.
Najlepsze praktyki dotyczące komponentów osi czasu
Niektóre praktyki, których należy przestrzegać, obejmują:
Zwiększ możliwości adaptacji układu poprzez wdrożenie zasad projektowania responsywnego, umożliwiając spójne i niezakłócone wrażenia użytkownika na różnych ekranach i urządzeniach poprzez staranne rozważenie proporcji, skali, płynnych siatek, obrazów, zapytań o media i pierwszego podejścia do urządzeń mobilnych.
Zastosowanie skutecznych technik programowania jest kluczowe dla zapewnienia płynnego działania animacji.
Wykorzystaj semantycznie odpowiednie elementy HTML, zapewnij optymalne proporcje kontrastu między tekstem a kolorami tła i zastosuj atrybuty ARIA, aby zwiększyć ogólną dostępność treści internetowych.
Ożyw swoją oś czasu: A Journey in Web Design
Tworzenie interaktywnej osi czasu wykracza poza zwykłą prezentację danych; wiąże się raczej z tworzeniem ekscytującego i pouczającego spotkania dla widza. Wykorzystanie architektury HTML, kunsztu CSS i technik animacji JavaScript umożliwia opracowanie wciągającej osi czasu, która nie tylko przyciąga uwagę odbiorców, ale także przekazuje istotne informacje w angażujący sposób.