Создание интерактивной временной шкалы с помощью CSS и JavaScript

от

Ключевые выводы

  • Мощную временную шкалу легко создать с помощью CSS и JavaScript.
  • Начните с описания HTML-структуры временной шкалы и оформления элементов временной шкалы с помощью CSS.
  • Продолжайте добавлять анимацию на временную шкалу с помощью JavaScript. Вы можете использовать API Intersection Observer для исчезновения элементов временной шкалы при прокрутке.

Временные шкалы — это мощные визуальные инструменты, которые помогают пользователям ориентироваться и понимать хронологические события. Узнайте, как создать интерактивную временную шкалу с помощью динамического дуэта 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. Создание и использование наблюдателя пересечений

В завершение создайте IntersectionObserver с этими параметрами и примените его к каждому элементу временной шкалы.

 const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
    observer.observe(item);
});

Окончательный результат должен выглядеть так:

Лучшие практики для компонентов временной шкалы

Некоторые практики, которых следует придерживаться, включают:

  • Оптимизируйте временную шкалу для разных размеров экрана. Изучите методы адаптивного дизайна, чтобы обеспечить удобство взаимодействия с пользователем на всех устройствах.
  • Используйте эффективные методы кодирования, чтобы обеспечить плавную анимацию.
  • Используйте семантический HTML, правильные коэффициенты контрастности и метки ARIA для лучшей доступности.

Воплощение вашей временной шкалы в жизнь: путешествие в веб-дизайн

Создание интерактивной временной шкалы — это не просто представление информации; речь идет о создании увлекательного и информативного опыта. Комбинируя структуру HTML, стили CSS и анимацию JavaScript, вы можете создать временную шкалу, которая очарует вашу аудиторию и предоставит ценный контент.