Ключові висновки
- Потужну шкалу часу легко створити за допомогою CSS і JavaScript.
- Почніть із окреслення HTML-структури шкали часу та стилізації елементів шкали часу за допомогою CSS.
- Продовжуйте додавати анімацію на часову шкалу за допомогою JavaScript. Ви можете використовувати Intersection Observer API, щоб згасати елементи часової шкали під час прокручування.
Хронологічні шкали — це потужні візуальні інструменти, які допомагають користувачам орієнтуватися та розуміти хронологічні події. Дізнайтеся, як створити інтерактивну шкалу часу за допомогою динамічного дуету CSS і JavaScript.
Побудова структури шкали часу
Для початку окресліть структуру HTML у файлі index.html. Створіть події та дати як окремі компоненти, заклавши основу для інтерактивної шкали часу.
<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>
На даний момент ваш компонент виглядає так:
Виберіть макет для своєї шкали часу: вертикальний чи горизонтальний
Під час розробки інтерактивної шкали часу ви можете вибрати вертикальний або горизонтальний стиль. Вертикальні часові шкали легко використовувати, особливо на телефонах, оскільки це типовий напрямок, у якому прокручуються веб-сайти. Якщо ваша часова шкала має багато вмісту, це, ймовірно, буде найзручнішим макетом.
Однак горизонтальні часові шкали привабливі на широких екранах і чудово підходять для творчих сайтів із меншою кількістю деталей, які можуть мінімізувати прокручування збоку в бік. Кожен стиль має свої переваги, які підходять для різних типів веб-сайтів і взаємодії з користувачами.
Стилізуйте часову шкалу за допомогою CSS
Існує три типи візуальних елементів, які ви будете стилізувати для шкали часу: лінії, вузли та позначки дати.
- Лінії: центральна вертикальна лінія, створена за допомогою псевдоелемента Timeline__content::after, служить основою шкали часу. Його стилізовано за допомогою певної ширини та кольору, розташованого абсолютно відповідно до центру елементів шкали часу.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} - Вузли: кола, стилізовані за допомогою класу Circle, діють як вузли на шкалі часу. Вони розташовані абсолютно в центрі кожного елемента шкали часу та візуально відрізняються кольором фону, утворюючи ключові точки на шкалі часу.
.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;
} - Маркери дати: дати, стилізовані за допомогою класу Timeline__date, відображаються по обидві сторони шкали часу. Їхнє розташування змінюється ліворуч і праворуч для кожного елемента шкали часу, створюючи шаховий, збалансований вигляд уздовж шкали часу.
.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;}
Перегляньте повний набір стилів від Репо GitHub у style.css.
Після стилізації ваш компонент має виглядати так:
Анімація за допомогою JavaScript
Щоб анімувати цей компонент, скористайтеся API Intersection Observer для анімації елементів часової шкали під час прокручування. Додайте наступний код до script.js.
1. Початкове налаштування
Спочатку виберіть усі елементи з класом Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Початковий стиль елементів шкали часу
Встановіть початкову непрозорість кожного елемента на 0 (невидимий) і застосуйте перехід CSS для плавного згасання.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Ви можете встановити ці стилі в таблиці стилів, але робити це було б небезпечно. Якщо JavaScript не запускається, цей підхід залишить вашу часову шкалу невидимою! Ізоляція цієї поведінки у файлі JavaScript є хорошим прикладом прогресивного вдосконалення.
3. Зворотний виклик спостерігача перетину
Визначте функцію fadeInOnScroll, щоб змінити прозорість елементів на 1 (видимий), коли вони перетинаються з вікном перегляду.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Параметри спостерігача перетину
Встановіть параметри для спостерігача з порогом 0,1, що вказує на те, що анімація запускається, коли видно 10% елемента.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Створення та використання Intersection Observer
Завершіть, створивши IntersectionObserver із цими параметрами та застосувавши його до кожного елемента шкали часу.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
Кінцевий результат має виглядати так:
Рекомендації щодо компонентів часової шкали
Деякі практики, яких слід дотримуватися, включають:
- Оптимізуйте часову шкалу для різних розмірів екрана. Вивчіть методи адаптивного дизайну, щоб забезпечити безперебійну взаємодію з користувачами на різних пристроях.
- Використовуйте ефективні методи кодування, щоб забезпечити плавну анімацію.
- Використовуйте семантичний HTML, відповідні коефіцієнти контрастності та мітки ARIA для кращої доступності.
Оживлення вашої хронології: подорож у веб-дизайн
Побудова інтерактивної шкали часу полягає не лише в представленні інформації; йдеться про створення цікавого та інформативного досвіду. Поєднуючи структуру HTML, стилі CSS і анімацію JavaScript, ви можете створити часову шкалу, яка захопить вашу аудиторію, надаючи цінний вміст.