Создание навигации с «плавающим» фоном ссылок на чистом CSS

[baldr]

Ох как я хотел бы подбросить дровишек под котел для тех дизайнеров, кто приделывает все эти "анимашечки" на сайты...

Открываешь ссылку, чтобы прочитать статью или просто посмотреть прайс на какой-нибудь продукт, и ноут разгоняет вентилятор, чтобы успеть прорисовать супер-плавный фон, на котором крутится размытое видео (которое никто не смотрит и даже не разобрать что там).. Полупрозрачные менюшечки плавно и красиво открываются с задержкой в секунду, что и начинает бесить ровно через секунду..

Ну блин, народ! Я зашёл на сайт не по менюшкам медленно ходить. Меню - это чисто утилитарная вещь, которая должна отрабатывать быстро, не занимать пол-экрана и не мешать мне посещать этот нужный мне сайт.

Ну ок, вы сделали это не на javascript, а на css - вероятно это будет чуть меньше жрать процессор и память (не факт). Кроме как похвастаться другому дизайнеру - эти кнопочки полезнее не стали.

А если я открою эту страницу с телефона - я даже не увижу всей этой красоты, зато грузить лишние килобайты кода буду всё равно.

[Deka87]

Спасибо за комментарий!

Ну ок, вы сделали это не на javascript, а на css - вероятно это будет чуть меньше жрать процессор и память (не факт). Кроме как похвастаться другому дизайнеру - эти кнопочки полезнее не стали.

Вы же понимаете, что верстальщик ≠ дизайнер 😅 Моя задача выполнить поставленную задачу так, чтобы ваш вентилятор разгонялся чуть медленнее 😊

[baldr]

Сэр, я прошу прощения за слишком резкий, видимо, комментарий. Сначала бомбануло от вашего примера, сейчас я немного остыл.

Тем не менее, хотелось бы пожелать не увлекаться "динамичными интерфейсами". Даже если вентилятор не будет разгоняться - возможно, не только меня бесят эти двигающиеся ползающие компоненты на странице.

верстальщик ≠ дизайнер

Да, сорян, это я обобщил.

[Deka87]

Могу посоветовать почитать про то, как настроить prefers-reduced-motion для вашего браузера. Если разработчики сайта позаботились об этом, раздражающих анимаций должно остаться меньше.

[alexnozer]

Проблема с prefers-reduced-motion в том, что многие как раз об этом не заботятся.

[Deka87]

Обновил пример с учетом prefers-reduced-motion.

[delphinpro]

Принцип работы неочевиден. Однако он становится очень наглядным, если увеличить время анимации и добавить промежуток между элементами меню (`.nav{gap: 1rem;}`). И это же выявляет еще один недостаток. Всё же на практике я бы остановился на js-решении.

Но трюк отличный! Так могут не только лишь все, не каждый может это сделать =).

[Deka87]

Определенно, в настоящем проекте я бы остановился на JS решении.

[sovaz1997]

Всё равно прикольно)

Сам делал на JS подобное, на CSS не получалось придумать)