Как создать интерактивную временную шкалу с помощью CSS и JavaScript
Временная шкала — это мощный инструмент визуализации, который помогает пользователям перемещаться и понимать события на временной шкале. Давайте вместе с TipsMake.com.com рассмотрим, как создавать интерактивные временные шкалы с помощью CSS и JavaScript.
Используя основы HTML, CSS и JS, вы мгновенно создадите и заработаете интерактивную временную шкалу.
Временная шкала — это мощный инструмент визуализации, который помогает пользователям перемещаться и понимать события на временной шкале. Давайте вместе с TipsMake.com.com рассмотрим, как создать интерактивную временную шкалу с помощью CSS и JavaScript.
Постройте структуру временной шкалы
Для начала наметьте структуру HTML в index.html. Создавайте события и даты как отдельные компоненты, закладывая основу для интерактивной временной шкалы.
График
Вот разбивка времени, которое мы ожидаем
использование для предстоящего мероприятия.
Случай 1
Lorem ipsum dolor сидеть amet consectetur adipisicing elit. Corporis, объяснимо.
1
12 декабря 2023 г.
Случай 2
Lorem ipsum dolor сидеть amet consectetur adipisicing elit. Corporis, объяснимо.
2
12 декабря 2023 г.
На данный момент компонент выглядит так:
Выберите вертикальную или горизонтальную компоновку временной шкалы.
При разработке интерактивной временной шкалы вы можете выбрать вертикальный или горизонтальный стиль. Вертикальную временную шкалу легко использовать, особенно на телефонах, поскольку это типичное направление прокрутки веб-страниц. Если на временной шкале много контента, это может быть наиболее удобный макет.
Однако горизонтальные временные шкалы более привлекательны на широких экранах и являются отличным выбором для творческих страниц с меньшим количеством деталей, которые можно прокручивать по очереди. Каждый стиль имеет свои особенности, подходящие для разных типов веб-сайтов и пользовательского опыта.
Оформление временной шкалы с помощью CSS
У вас есть три типа визуальных элементов для оформления временной шкалы: линия, узел и отметка даты.
- Линии: вертикальная линия посередине, созданная с помощью псевдоэлемента Timeline__content::after, которая действует как «позвоночник» временной шкалы. Он имеет определенную ширину и цвет и расположен так, чтобы располагаться по середине элементов временной шкалы.
.Timeline__content::after { цвет фона: var(–clr-purple); содержание: “”; позиция: абсолютная; слева: Calc(50% – 2px); ширина: 0,4рем; высота: 97%; z-индекс: -5; }
- Узлы: круги, стилизованные с использованием класса круга, которые действуют как узлы на временной шкале. Они располагаются абсолютно в центре каждого элемента временной шкалы и действуют как пересечения на временной шкале. Они расположены абсолютно в центре каждого элемента временной шкалы и визуально отличаются от цвета фона, образуя ключевые точки на временной шкале.
.circle { позиция: абсолютная; фон: var (–clr-фиолетовый); верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); максимальная ширина: 6,8рем; ширина: 100%; соотношение сторон: 1/1; радиус границы: 50%; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; z-индекс: 3; размер шрифта: 1.6rem; }
Маркеры даты: даты, стилизованные с помощью класса Timeline__date, отображаются по обе стороны временной шкалы. Их положение попеременно слева и справа для каждого элемента временной шкалы, создавая сбалансированное, шахматное изображение на временной шкале.
.Timeline__text, .Timeline__date { ширина: 50%; } .Timeline__item:nth-child(even) { flex-direction: row-reverse;} .Timeline_item:nth-child(even) .Timeline_date { text-align: right; отступ справа: 8.3rem; } .Timeline_item:nth-child(even) .Timeline_text {padding-left: 8.3rem;} .Timeline_item:nth-child(odd) .Timeline_text { text-align: right; выровнять-элементы: гибкий конец; отступ справа: 8.3rem; } .Timeline_item:nth-child(odd) .Timeline_date {padding-left: 8.3rem;}
После оформления ваш компонент будет выглядеть так:
Создание анимации с помощью 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 = “уменьшение непрозрачности 0,6 с”; }
3. Наблюдатель пересечений обратных вызовов
Определите функцию FadeInOnScroll, чтобы изменить непрозрачность элементов на 1 (видимый), когда они пересекают область просмотра.
const FadeInOnScroll = (записи, наблюдатель) => { elements.forEach((entry) => { if (entry.isIntersecting) {entry.target.style.opacity = 1; } }); };
4. Параметры наблюдения за перекрестками
Установите выбор для наблюдателя с порогом 0,1, указывающим, что анимация будет запускаться, когда будет видно 10% элементов.
const options = { root: null, rootMargin: “0px”, порог: 0,1, }
5. Создайте и используйте Intersection Observer
В завершение создайте IntersectionObserver с этими параметрами и примените его к каждому элементу временной шкалы.
const наблюдатель = новый IntersectionObserver (fadeInOnScroll, параметры); timelineItems.forEach((item) => { Observer.observe(item); });
Создание интерактивной временной шкалы не только представляет информацию, но и создает более привлекательный опыт работы в Интернете. Комбинируя структуру HTML, стили CSS и анимацию JavaScript, вы можете сделать это с легкостью. Удачи!
