Главная » Статьи » Как в CSS воссоздать красивую анимацию Netflix

Как в CSS воссоздать красивую анимацию Netflix

Как в CSS воссоздать красивую анимацию Netflix

От автора: дизайн страницы просмотра Netflix остается почти неизменным в течение нескольких лет. Одним из основных компонентов является слайдер предварительного просмотра, который позволяет пользователям прокручивать содержимое и наводить курсор на элементы, чтобы увидеть увеличенный блок.

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

Вот так:

Как в CSS воссоздать красивую анимацию Netflix

Мы можем сделать это в CSS! Без JavaScript. Без зависимостей. Только CSS. Но прежде чем приступить к какому-либо коду, вот что мы хотим сделать:

Карточка, на которую наведен курсор, должна расширяться, сохраняя соотношение сторон.

Когда на карточку наведен курсор, другие карточки не должны менять размер, но должны смещаться в стороны, чтобы они не перекрывались.

Все карточки должны оставаться отцентрированными вертикально.

Звучит неплохо? Теперь давайте рассмотрим код.

HTML и гибкие элементы

Давайте настроим строку изображений, которые представляют превью видео Netflix. Это включает:

Родительский элемент .container с несколькими элементами .item внутри

Каждый элемент .item состоит из изображения, обернутого в тег анкора

Преобразование .container во flex-контейнер, который выравнивает элементы в ряду

Настройка flex поведения для класса .item, чтобы элементы занимали одинаковое пространство в строке

Расширение элемента при наведении

Наш следующий шаг – задать расширение элемента при наведении курсора. Мы могли бы сделать это с помощью анимации width элемента, но это может повлиять на поток документа и вызвать изменение соседних элементов — плюс, анимирование свойства width это, как известно, плохо для производительности в некоторых случаях.

Чтобы не изменять соседние элементы, мы вместо этого собираемся анимировать свойство transform — в частности, его функцию scale(). Это не повлияет на поток документа, как в случае width.

Смещение соседних элементов

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

Мы обратимся к функции transform свойства translateX() , чтобы сместить соседние элементы. Опять же, анимация transform намного лучше, чем другие свойства, влияющие на поток документов, такие как поля и отступы.

Так как мы установили для элемента увеличение на 150% при наведении, переход должен быть установлен на 25%. Это половина дополнительного пространства, занимаемого целевым элементом.

.item:hover ~ .item { transform: translateX(25%);
}

Это позволяет смещать элементы справа, но как мы можем сместить элементы слева? Так как общий комбинатор смежных элементов применяется только к элементам одного уровня, расположенным после данного селектора (без движения «назад»), нам понадобится другой подход.

Одним из способов является добавление дополнительного правила наведения для самого родительского контейнера. Вот план:

При наведении курсора на родительский контейнер сдвиньте все элементы внутри этого контейнера влево.

Используйте общий комбинатор смежных элементов, чтобы элементы, расположенные после целевого элемента смещались вправо.

Получите супер специфичность, чтобы элемент, на который наведен курсор, не перемещался, как остальные элементы.

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

Демо-версия!

Хочу отметить одну вещь: в этой последней версии используются псевдо-классы :focus и :focus-within для поддержки навигации с помощью клавиатуры. В примере Netflix их нет, но я думаю, что это хороший штрих для доступности.

Вот и все! Да, мы могли бы использовать прослушиватели событий JavaScript вместо правил наведения CSS, и это могло бы быть лучше для удобства сопровождения и читабельности. Но иногда интересно посмотреть, как далеко может нас завести CSS!

Автор: Chris Geelhoed

Источник: https://css-tricks.com

Редакция: Команда webformyself.