Как выделять элементы в 2022 году (лучшие практики)
Опубликовано: 2022-08-23В этой статье мы обсудим лучшие способы создания движущихся выделенных элементов в современном веб-дизайне.
Выделение — это бесконечный раздел текста и/или визуального элемента (например, изображения), который автоматически прокручивается по горизонтали.
Несмотря на то, что официальный HTML-элемент <marquee> устарел и настоятельно не рекомендуется его использовать, общий эффект прокрутки, непрерывных элементов, используемых для оживления веб-страницы, жив и здоров в 2022 году, появляясь на многих модных веб-сайтах.
Некоторые до сих пор даже используют элемент Marquee, который по-прежнему поддерживается всеми браузерами, несмотря (опять же) на то, что его использование не рекомендуется. Например, вот классическая прыгающая «экранная заставка» DVD, созданная с помощью HTML-шаблона.
Это не умно, но все еще работает. Причины, по которым следует избегать использования этого элемента в 2022 году, понятны:
- Это не совсем доступно
- Он на 100% устарел, и его поддержка может быть (и, вероятно, в какой-то момент будет) прекращена.
- С самого начала он никогда не был настоящим HTML-элементом (не частью какого-либо стандарта).
Тем не менее, мы всегда были поклонниками шатров в Isotropic.
Взгляните на многие модные веб-сайты Awwwards, и вы увидите, что текст, изображения или их комбинация движутся горизонтально, например:
Это демо-шатер
Конечно, никогда не стоит помещать критически важную информацию в прокручиваемые или анимированные разделы. Но для чего-то вроде приведенного выше примера это выглядит круто, выделяет сайт и делает его запоминающимся. Используйте его с умом и в меру.
Бегущие строки настолько круты, что мы даже опубликовали полезный инструмент, который будет автоматически генерировать раздел прокручиваемого текста в стиле «бегущая строка», используя тени блока CSS. Это круто, но я думаю, что подход, обсуждаемый в этой статье, даже лучше.
Код для создания этой демонстрации взят из CodePen Райана Маллигана, который (вероятно) является лучшим способом создания эффекта выделения в 2022 году. Он также пишет об этом коде в своем блоге https://ryanmulligan.dev/ блог/css-шатер.
Он доступен (поддерживает предпочтительное уменьшение движения), бесконечен, допускает любой тип HTML-элемента, легкий и простой в реализации.
Он также сделан с использованием 100% CSS и без JS.
<div class="шатер">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Собаки Unsplash</p>
<p aria-hidden="true">Собаки Unsplash</p>
<p aria-hidden="true">Собаки Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Собаки Unsplash</p>
<p>Собаки Unsplash</p>
<p>Собаки Unsplash</p>
</div>
</div>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> URL-адрес импорта ("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
box-sizing: граница-коробка;
}
тело {
мин-высота: 100вх;
}
тело {
--space: 2rem;
отображение: сетка;
выровнять содержимое: по центру;
переполнение: скрыто;
пробел: var(--пробел);
ширина: 100%;
семейство шрифтов: "Corben", системный пользовательский интерфейс, без засечек;
размер шрифта: 1.5rem;
высота строки: 1,5;
}
.шатер {
-- продолжительность: 60 с;
--gap: переменная(--пробел);
дисплей: гибкий;
переполнение: скрыто;
выбор пользователя: нет;
разрыв: вар(--пробел);
преобразование: skewY(-3deg);
}
.marquee__group {
гибкая усадка: 0;
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: пространство вокруг;
разрыв: вар(--пробел);
минимальная ширина: 100%;
анимация: прокрутка var(--duration) линейная бесконечная;
}
@media (предпочитает уменьшенное движение: уменьшить) {
.marquee__group {
состояние воспроизведения анимации: приостановлено;
}
}
.marquee__group изображение {
max-width: зажим(10бэр, 1бэр + 28вмин, 20бэр);
соотношение сторон: 1;
объект подходит: обложка;
радиус границы: 1rem;
}
.marquee__group p {
фоновое изображение: линейный градиент (
75 градусов,
hsl(240град 70% 49%) 0%,
hsl(253град 70% 49%) 11%,
hsl(267 градусов 70% 49%) 22%,
hsl(280град 71% 48%) 33%,
hsl(293град 71% 48%) 44%,
hsl(307градус 71% 48%) 56%,
hsl(320град 71% 48%) 67%,
hsl(333градус 72% 48%) 78%,
hsl(347град 72% 48%) 89%,
hsl(0deg 73% 47%) 100%
);
-webkit-background-clip: текст;
-webkit-text-fill-color: прозрачный;
}
.marquee--границы {
бордюрный блок: 3px сплошной синий;
колодка: 0,75 бэр;
}
.marquee--reverse .marquee__group {
анимация-направление: реверс;
анимация-задержка: calc(var(--duration) / -2);
}
прокрутка @keyframes {
0% {
трансформировать: перевестиX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
Давайте посмотрим, как это было создано и почему это так здорово.
Вот обзор, прежде чем мы посмотрим на весь код:
- Мы можем легко контролировать скорость и направление эффекта прокрутки. Для скорости ставим
.marquee--reverse. - Он модульный — вы можете иметь столько групп, сколько хотите, обернув содержимое в div с классом
.marqueeи внутреннее содержимое с.marquee__group. - Размер отзывчивый и плавный, поскольку он использует переменные CSS и зажим.
- Это доступно с использованием меток aria и паузы, если для параметра CSS Preferences-Reduced-Motion установлено значение Reduce.
- Движение — это стандартная анимация CSS, в которой используются ключевые кадры (поэтому вы можете приостановить движение при наведении, если хотите). Там вообще нет JS.
- Это также довольно копировать / вставлять. Просто замените свой контент, внедрите HTML и CSS, и вы получите крутую маленькую шатер.
Это действительно хорошо сделано, и (imo) должно быть стандартным способом реализации эффекта выделения в 2022 году.
Вот HTML:
В демо мы видим три шатра. Первый и третий реверсируются с помощью класса .marquee--reverse . Они имеют стандартную скорость и содержат изображения.
Второй (средний) полностью текстовый и реализует границы с помощью пользовательского класса. Он также имеет более медленную продолжительность, установленную атрибутом стиля: .
Вы также заметите, что внутри div .marquee есть дубликаты, которые совпадают, за исключением тега aria.
Это сделано для того, чтобы сделать анимацию плавно бесконечной, а также иметь возможность адаптироваться к различным соотношениям области просмотра (подробнее об этом, когда мы рассмотрим CSS).
Это делается доступным с помощью aria-hidden="true" , который удаляет повторяющийся контент из дерева специальных возможностей.
Кроме того, изображения подаются непосредственно из Unsplash. Вам может быть интересен этот ресурс: Как генерировать случайные изображения по URL-адресу (веб-разработка)
В целом, это элегантная и простая структура HTML.
Теперь давайте посмотрим на CSS
А вот и CSS (прямо из CodePen):
Мы можем видеть следующее:
- Все использует REM, переменные и зажим, а это означает, что эффект плавный и будет реагировать на размер экрана и настройки браузера.
- Анимация на 100% CSS. Это реализовано с помощью строки "
animation: scroll var(--duration) linear infinite;" в.marquee__group. Анимация бесконечная, линейная и именованная прокрутка. Корневая продолжительность контролируется переменной--duration, которую можно перезаписать, чтобы контролировать скорость определенной группы в разметке HTML (упомянутой выше). - Прокрутка — это базовое преобразование, переводящее X.
- Чтобы обратить анимацию вспять, у нас просто есть "
animation-direction: reverse;" в классе.marquee--reverse .marquee__group. - Мы используем calc и --gap для большинства интервалов. Это делает вещи гибкими, и вы можете изменить Gap в соответствии со своими потребностями.
- Существует эффект перекоса (3%), который делает его диагональным, который можно удалить, чтобы сделать его 100% горизонтальным.
- Это доступно и ответственно, так как оно не будет двигаться, если задано Preferences-Reduced-Motion: Reduce (узнайте, как проверить это здесь).
По сути, он делает все очень хорошо, и это лучший способ реализовать эффект бегущей строки в 2022 году.
Для реализации вы просто добавляете HTML на свою страницу, заменяете текст/изображения и добавляете CSS в свои глобальные стили.
Вы можете играть с переменными, но на самом деле это довольно просто подключи и играй ... вам не нужно много менять!