Используя базовые концепции HTML, CSS и JS, вы мгновенно создадите привлекательную временную шкалу.

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

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

Временные шкалы — это мощные визуальные инструменты, которые помогают пользователям ориентироваться и понимать хронологические события. Узнайте, как создать интерактивную временную шкалу с помощью динамического дуэта CSS и JavaScript.

Построение структуры временной шкалы

Вы можете просмотреть полный код этого проекта на его Репозиторий GitHub.

Для начала наметим структуру HTML в index.html. Создавайте события и даты как отдельные компоненты, закладывая основу для интерактивной временной шкалы.

<body>
<sectionclass="timeline-section">





instagram viewer



<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>

На данный момент ваш компонент выглядит так:

Выберите макет для своей временной шкалы: вертикальный или вертикальный. Горизонтальный

При разработке интерактивной временной шкалы вы можете выбрать вертикальный или горизонтальный стиль. Вертикальные шкалы времени просты в использовании, особенно на телефонах, поскольку это типичное направление прокрутки веб-сайтов. Если в вашей ленте много контента, вероятно, это будет самый удобный макет.

Однако горизонтальные временные шкалы привлекательны на широких экранах и отлично подходят для творческих сайтов с меньшим количеством деталей, которые могут свести к минимуму боковую прокрутку. У каждого стиля есть свои преимущества, подходящие для разных типов веб-сайтов и пользовательского опыта.

Оформление временной шкалы с помощью 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 в стиль.css.

После стилизации ваш компонент должен выглядеть так:

Анимация с помощью JavaScript

Чтобы анимировать этот компонент, используйте API наблюдателя пересечений для анимации элементов временной шкалы при прокрутке. Добавьте следующий код в скрипт.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, вы можете создать временную шкалу, которая очарует вашу аудиторию и предоставит ценный контент.