Створення інтерактивної шкали часу за допомогою CSS і JavaScript

Зміст

Основні висновки

Створення динамічної шкали часу можливе завдяки поєднанню CSS та JavaScript.
Початковим кроком є розробка HTML-структури шкали часу, після чого слід стилізація її елементів за допомогою CSS.
Наступним етапом є додавання анімації до шкали часу за допомогою JavaScript, зокрема, можна застосувати Intersection Observer API для створення ефекту плавного з’явлення елементів під час прокручування сторінки.

Хронологічні шкали є ефективним інструментом для візуалізації та розуміння послідовності подій. Давайте розглянемо процес створення інтерактивної шкали часу, використовуючи можливості CSS та JavaScript.

Створення структури часової шкали

Першим кроком є створення HTML-структури у файлі index.html. Кожна подія та дата має бути окремим елементом, що забезпечить основу для подальшої інтерактивності.

<section class="timeline-section">
  <div class="container">
    <div class="Timeline__header">
      <h2>Хронологія</h2>
      <p class="heading--title">
        Детальний опис часу, який ми плануємо використовувати для наступної події.
      </p>
    </div>
    <div class="Timeline__content">
      <div class="Timeline__item">
        <div class="Timeline__text">
          <h3>Подія 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 грудня 2023</h3>
      </div>
      <div class="Timeline__item">
        <div class="Timeline__text">
          <h3>Подія 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 грудня 2023</h3>
      </div>
    </div>
  </div>
</section>

На даному етапі ваша шкала часу виглядає так:

Вибір макету: вертикальна або горизонтальна шкала часу

При розробці інтерактивної шкали часу важливо визначитися з її орієнтацією: вертикальною або горизонтальною. Вертикальні шкали часу є зручними, особливо для мобільних пристроїв, оскільки вони відповідають стандартному напрямку прокручування веб-сайтів. Якщо шкала часу містить багато інформації, то вертикальний макет буде більш зручним.

Горизонтальні шкали часу, у свою чергу, добре виглядають на широких екранах і підходять для веб-сайтів із меншою кількістю деталей, оскільки вони дозволяють мінімізувати вертикальне прокручування. Кожен із цих макетів має свої переваги, які слід враховувати при розробці веб-сайту.

Стилізація шкали часу за допомогою 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;}

Повний набір стилів можна знайти у файлі style.css на GitHub.

Після стилізації ваша шкала часу має виглядати наступним чином:

Анімація за допомогою JavaScript

Для анімації елементів шкали часу використовується Intersection Observer API. Код JavaScript необхідно додати до файлу 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";
});

Ці стилі можна було б встановити безпосередньо в CSS, але це може бути ризиковано. Якщо 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, CSS та JavaScript, ви можете створити часову шкалу, яка зацікавить користувачів та надасть їм корисну інформацію.