Иногда случается так, что не всем пользователям нравятся декоративные анимации или плавные переходы, а некоторые вообще испытывают рвотный рефлекс, когда сталкиваются с параллаксной прокруткой, эффектами масштабирования и т.д. Медиа-запрос prefers-reduced-motion позволяет создать вариант вашего сайта с упрощенной динамикой для пользователей, которые не любят анимационные эффекты.
Бешеный темп жизни
У вас бывает так, что вы идете днем по улице, размышляя про себя о чем-то важном и попадаете в рабочий час пик? Со всех сторон люди, толпы, каждый что-то делает, о чем-то говорит, плюс мешающие звуки магазинов и транспорта. И как результат такой атмосферы - неспособность сосредоточиться на своем и, в итоге, ощущение визуальной и эмоциональной перегрузки.
Подобное может происходить и в Интернете: с мигающей рекламой, причудливыми эффектами параллакса, неожиданной анимацией раскрытия меню, автоматическим воспроизведением видео и т. д. Интернет иногда может быть слишком перегруженным…
К счастью, в отличие от реальной жизни, в интернете есть решение этой проблемы. Медиа-запрос CSS prefers-reduced-motion позволяет разработчикам создать вариант страницы для пользователей, предпочитающих более спокойное поведение интерфейса. Он может включать в себя что угодно: от отказа в автоматическом воспроизведении видео и отключения некоторых декоративных эффектов до полного изменения дизайна страницы.
Однако прежде чем углубиться в возможности этой функции, поразмышляем, для чего вообще анимация используется в Интернете.
Анимация в вебе
Анимация часто используется для предоставления обратной связи пользователю, например, чтобы сообщить ему, что его действие принято и обрабатывается. Например, в интернет-магазине покупка товара может быть анимированна так, что по клику иконка товара улетает в виртуальную корзину, отображаемую в виде значка в правом верхнем углу сайта.
Другой вариант включает в себя использование анимации для привлечения фокуса пользователя к конкретному контенту, чтобы ускорить процесс поиска нужной информации. Либо же анимация позволяет задержать на ней фокус пользователя, пока прогружается необходимая информация.
Наконец, есть просто декоративные эффекты, такие как анимированные градиенты, параллакс, фоновое видео и другие, выделяющие сайт среди других. И хотя многим пользователям нравятся такие анимации, некоторые их не любят, потому что они наоборот могут отвлекать или замедлять работу. А в реальной жизни встречается даже такое, что для пользователей сокращение анимации является медицинской необходимостью.
Вестибулярные расстройства, вызванные движением
Некоторые пользователи испытывают рассеянность или тошноту от анимированного контента. Например, анимация прокрутки может вызвать вестибулярные расстройства, когда элементы, отличные от основного, связанного с прокруткой, интенсивно перемещаются. Анимация параллакса может вызвать вестибулярные расстройства, т.к. элементы фона перемещаются с другой скоростью, а иногда и в другом направлении. Все это может вызывать головокружение, тошноту и мигрени.
Настройка анимаций в операционных системах
Многие операционные системы уже давно имеют настройки специальных возможностей для указания предпочтений в отображении динамических эффектов. В системе macOS, к примеру, среди настроек есть пункт Accessibility, где можно поставить галочку возле опции "Reduce motion", отвечающей за уменьшение динамики элементов системы. Когда этот флажок установлен, операционная система не использует декоративные эффекты, например такие, как анимация запуска приложений. Кроме того, сами приложения могут и должны соблюдать этот параметр и удалять все ненужные анимации.
Удаление динамики в вебе
Media Queries Level 5 позволяют учитывать предпочтения пользователей по отображению динамического контента, запрашивая значения пользовательского агента или устройства. Медиа-запрос prefers-reduced-motion используется для определения того, установил ли пользователь в настройках операционной системы предпочтение свести к минимуму количество динамического контента. Он может принимать два возможных значения:
- no-preference: указывает, что пользователь не сделал никаких предпочтений в своей операционной системе. То есть значение оценивается как ложное.
- reduce: указывает, что пользователь установил предпочтение операционной системы, указывающее, что интерфейсы должны свести к минимуму динамику и анимацию.
Как использовать prefers-reduced-motion
Как и любой медиа-запрос, prefers-reduced-motion можно использовать как в контексте CSS, так и в JS.
Чтобы проиллюстрировать оба варианта, предположим, что у нас есть важная кнопка регистрации, по которой должен кликнуть пользователь. Для привлечения внимания ее можно сделать с «вибрирующей» анимацией, но как добропорядочные разработчики, будем воспроизводить ее только для тех пользователей, которые явно согласны с тем, чтобы получать динамический контент.
/* Для пользователей, отказавшихся от анимации */
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
/* Для пользователей, не отказавшихся от анимации */
@media (prefers-reduced-motion: no-preference) {
button {
animation: vibrate 0.3s linear infinite both;
}
}Если у вас много анимации на сайте, хорошей практикой будет поместить всю анимацию в отдельный css-файл и загружать его с использованием атрибута медиа-запроса: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">
Для демонстрации работы медиа-запроса в JavaScript, представим, что у нас есть еще одна сложная анимация, написанная с помощью Web Animations API. Поскольку правила CSS динамически отрабатываются при изменении предпочтений пользователя, для анимаций JavaScript необходимо задать слушатель изменений и останавливать их вручную:
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// Здесь останавливаем наши анимации JS
});
Комментарии (0)