Хронологические шкалы — это еще один дополнительный элемент, который можно интегрировать в веб-сайт, чтобы продемонстрировать прогресс или эволюцию бизнеса или компании на протяжении многих лет. Эта визуально привлекательная графика, элегантно составленная с использованием типографики и других визуальных элементов, может проиллюстрировать этапы развития услуги или продукта с течением времени.
Ниже представлены 29 вариантов временных шкал, от вертикальных до горизонтальных. Вы обязательно найдете идеальный вариант, который подойдет для ваших нужд, и разместите его на странице веб-сайта, который вы разрабатываете для клиента или для себя. Здесь собрана коллекция очень интересных и визуально привлекательных временных шкал.
Временная шкала с помощью прокрутки
Хронологическая шкала, созданная с использованием HTML, CSS и JavaScript, элегантно оформлена в минималистичном дизайне , где красный цвет используется для списка лет слева, а черный — для типографики и заголовков H2. Самое приятное — это автоматическое обновление года при прокрутке страницы вниз. Превосходное качество исполнения, дизайна и результатов.
Хронология в CSS
Эта временная шкала использует код CSS для настройки некоторых своих свойств. В отличие от предыдущей, она не имеет прокрутки , но включает в себя ряд блоков и синий цвет, что придает ей элегантный вид и добавляет её в список временных шкал в этой публикации.
Адаптивный слайдер временной шкалы
Эта временная шкала создана с использованием библиотеки Swiper JS, которая включает в себя HTML, CSS и JavaScript-код. Она не прокручивается при перемещении по веб-странице, но отображает годы справа и содержит кнопку для перехода к следующему году. Вы также можете использовать указатель мыши для перехода к определенному году. Анимация каждого перехода превосходна.
Расширенная шкала времени
Эта временная шкала выделяется использованием HTML, CSS и JavaScript, а также монохромным дизайном , в частности, в оттенках красного. Она также включает кнопку, позволяющую пользователям перемещаться вперед или назад по временной шкале, что делает дизайн очень эффективным и минималистичным.
Временная шкала с фиксированным заголовком и Flexbox
HTML и CSS код для фиксированного заголовка, который останется на месте при прокрутке страницы вниз. Это удивительно ненавязчивая и ценная функция для любого современного веб-разработчика, стремящегося выделиться, придерживаясь современных стандартов веб-дизайна.
Сроки реализации проекта
Эта временная шкала использует CSS и HTML для отображения ключевых событий за определенный период проекта . При прокрутке она отображает дни недели, что делает ее идеальной для использования в инструментах для совместной работы, разработанных самой компанией.
Лента
Временная шкала, созданная с использованием HTML, CSS и JavaScript, выделяется среди остальных благодаря своему визуальному дизайну. При прокрутке вертикальной временной шкалы каждая новая фотография автоматически становится фоновым изображением веб-страницы, где расположен этот код.
Hyperloop
Hyperloopu — это временная шкала, которая выделяется прежде всего своим дизайном и тем фактом, что она полностью запрограммирована на HTML и CSS. Её отличительной чертой является использование шрифтов разного размера, вертикальной линии и ряда прямоугольников, отмечающих каждый важный момент на временной шкале.
Вертикальная шкала времени
Временная шкала, разделенная на интервалы, выделяется на фоне остальных благодаря своему визуальному стилю . Она отличается современным градиентным фоном и рядом прямоугольников, обозначающих каждый интервал. Шкала создана с использованием CSS и HTML.
Временная шкала в Flexbox
Одна из самых продуманных хронологических таблиц, использующая карточки для отображения всей необходимой информации за определенный период времени. Разработанная с использованием HTML и CSS, она требует, чтобы все карточки имели одинаковую высоту и ширину для корректного отображения на больших экранах.
Хронология в DIV
Минималистичный дизайн временной шкалы, разработанный исключительно на HTML и CSS , что делает его быстрым в реализации. Монохромный дизайн идеально подходит для представления временной шкалы в новостном издании.
Хронология в CSS и HTML
На этой временной шкале можно разместить изображения размером 400x300 пикселей . Она отличается зеленым цветом линий и текста для дат и дней. В ней нет анимации, и она характеризуется простым дизайном на всех уровнях.
Хронология комментариев и отзывов
Эта временная шкала значительно отличается от других, поскольку позволяет пользователям добавлять карточки со своими фотографиями , по крайней мере, такова первоначальная задумка. Карточки отличаются выразительным визуальным стилем, в них используется затенение, что делает временную шкалу довольно плоской и лишенной анимации.
Хронология утра в HTML и CSS
Идеальная временная шкала для адаптивного дизайна, созданная на основе HTML и CSS , предлагающая достаточно простую, но при этом очень удобную для мобильных устройств структуру.
Пользовательский интерфейс временной шкалы
Этот HTML и CSS код идеально подходит для представления расписания занятий в рамках тренинга . Он адаптивный, с изображением в заголовке и рядом кнопок, которые отображают информацию очень четко и визуально понятно.
Временная шкала только в CSS
Эта временная шкала отличается своим CSS-дизайном и удачно подобранной цветовой схемой: красный и зеленый . Зеленый цвет покрывает всю страницу, белый используется для текста и разделителей, а красный обозначает текущий временной интервал. При нажатии на каждый интервал он выделяется рамкой.
Адаптивная временная шкала V3
Первая из горизонтальных временных шкал в списке, созданная с помощью HTML, CSS и JavaScript. Она визуально выделяется благодаря использованию черного и серого цветов для создания горизонтальной линии с рядом точек. Каждый интервал выделен увеличенным шрифтом и текстовым содержимым.
Цветная шкала
Одна из самых качественных горизонтальных временных шкал в этом списке . Высокоинтерактивная временная шкала с ненавязчивыми и хорошо представленными анимациями, обеспечивающая превосходный пользовательский опыт при каждом щелчке по временному интервалу. Она создана с использованием HTML, CSS/Sass и JavaScript/TypeScript (jquery.js).
Временная шкала отзывчивой истории
Идеальная хронологическая шкала для визуального отображения различных событий исторического периода. Она горизонтальная и адаптивная, разработана с использованием HTML, CSS и JavaScript.
Хронология группы
Эта временная шкала выделяется благодаря отлично выполненной горизонтальной анимации перехода . Она отличается яркими цветами и изысканным дизайном, который подчеркивает каждый временной интервал. Созданная с использованием HTML, CSS и JavaScript, она представляет собой серию карточек, наложенных на репрезентативное фоновое изображение.
Горизонтальная временная шкала CSS и HTML
Эта временная шкала, созданная известным блогером Envato Tuts+ , имеет горизонтальную структуру и состоит из ряда простых, незамысловатых карточек. В ней используются однотонные цвета и горизонтальная линия, а каждый интервал отмечен рядом красных точек.
Временная шкала CSS, HTML и slick.js
Пастельные тона в дизайне временной шкалы, которая выделяется благодаря представлению каждого изображения, представляющего каждый временной интервал. Именно переходы между изображениями и интервалами делают эту временную шкалу поистине замечательной.
Последовательность временной шкалы V1
Временная шкала, в которой выделяются кнопки на каждой вертикальной линии каждого интервала, позволяющие при каждом нажатии отображать фоновое изображение на весь экран.
Горизонтальная шкала времени HTML CSS
На этой временной шкале нельзя будет щелкнуть мышкой ни в одном месте, она выделяется своим изысканным дизайном, продуманным выбором цветовой палитры и серией речевых пузырей для каждой временной линии. Анимации нет, но визуально она очень приятна.
Хронология Codyhouse
Эта временная шкала , представленная Codyhouse, выполнена в монохромном стиле и создана с использованием HTML, CSS и JavaScript. Она представляет собой минималистичную линию с рядом точек, которые служат интервалами для запуска горизонтальной анимации длительностью менее половины секунды при нажатии. Просто, но очень эффективно.
Горизонтальная шкала времени
Ещё одна временная шкала, созданная с помощью HTML, CSS и JavaScript. Отличительной чертой является монохромный дизайн , элегантная компоновка с зелёными акцентами, выделяющими каждую точку, представляющую временной интервал. При каждом щелчке по точке запускается плавная анимация боковой прокрутки.
Хронология без названия
Единственная временная шкала в списке выполнена черным фоном. Для обозначения каждого года и текста, а также его границ используются разные цвета . Между каждой текстовой записью происходит плавный переход с помощью анимации.
Временная шкала
На этой временной шкале подчеркивается полная статичность зеленого цвета .
Еще одна горизонтальная шкала времени
Вы можете разместить изображение почти на весь экран, чтобы получилась временная шкала, которая выделяется использованием синих и серых тонов, а также рядом кругов, представляющих каждый год.
Не пропустите еще одну серию статей о меню, созданных с помощью CSS и HTML.