Как сделать blur navbar при скролле

Суть. CSS backdrop-filter и fallback для старых браузеров.

Суть

При скролле navbar получает полупрозрачный фон и backdrop-filter: blur() — как на dev-solo.ru.

Прокрутите демо внутри карточки.

Демо blur при скролле

.topbar.is-scrolled {
  background: rgba(10, 12, 18, 0.72);
  backdrop-filter: blur(12px);
}

bar.classList.toggle('is-scrolled', window.scrollY > 24);

@supports not (backdrop-filter: blur(12px)) {
  .topbar.is-scrolled { background: rgba(10, 12, 18, 0.95); }
}

Заметки

Blur дороже обычного фона — не вешайте на десятки элементов.

Как сделать blur navbar при скролле — про баланс: интерфейс должен откликаться, но не съедать FPS и батарею. В статье есть живой пример; ниже — контекст, когда эффект оправдан.

Когда анимация уместна

• Обратная связь на действие: hover, focus, успех отправки формы.
• Смена контекста: открытие модалки, переход между шагами.
• Первый визит: короткий fade hero, не минутный ролик.

Не анимируйте всё подряд: 2–3 акцента на экран достаточно. Обязательно проверьте prefers-reduced-motion.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Визуально дороже без дизайнера — типографика и отступы
• Портфолио — живые кейсы
• Услуги — лендинг и визитка