Ховер-эффект – это когда при наведении мышки на объект он реагирует: меняется цвет кнопки, появляется подсветка, картинка немного движется или увеличивается, всплывает информационная надпись, изменяется цвет ссылки и т.д. Вариантов ховера очень много, они зависят от фантазии и мастерства разработчика.

Зачем это нужно

Ховер-эффект – вещь достаточно простая, но именно такие мелочи и делают сайт живым и привлекательным. Это очень полезное внедрение, которое помогает пользователю сориентироваться. Ведь если при наведении мышки элемент откликается, то становится ясно, что ты на верном пути. Если это кнопка, то эффект дает понять, что ты по ней попал и можно нажимать. Если это таблица, то в ней могут подсвечиваться столбцы для более удобного просмотра.

Еще один плюс ховер-эффекта – это возможность не перенасыщать сайт информацией, сделать его лаконичным, но информативным. Например, тебе нужно сделать страницу с рекламой аренды офисных помещений. Ты размещаешь там схематичное изображение здания. При наведении мышкой на этажи, они подсвечиваются, показывая более подробную планировку. Там же может появляться информация о площади, цене и прочие подробности. И вот, твоя страница выглядит аккуратно, там нет ничего лишнего. Посетитель читает только те сведения, которые ему интересны, не перегружая мозг лишней информацией. Удобно, стильно, наглядно.

Как использовать ховер

Необязательно делать эффекты наведения функциональными. Это также игровые моменты и пасхалки, которые добавляют сайту динамики и помогают завоевать внимание и доверие пользователя.

Согласись, достаточно весело залипать на сайте с картинками котиков, если они следят глазами за твоим курсором. Сделай что-то оригинальное, это понравится твоей аудитории и заказчику. Сайты с ховером всегда конвертят лучше, чем без него – сделай два идентичных варианта с ховер-эффектами и без них, проведи АВ-тесты и убедись самостоятельно в этом.

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

Рассмотрим 10 самых распространенных и простых в реализации ховер-эффектов.

  1. Изменение цвета. Преимущественно применяется для кнопок, ссылок и прочих переходов. Изменение цвета показывает активность элемента, что удобно. Для реализации эффекта можно просто применить стиль CSS с добавлением псевдокласса “:hover” и обозначить там нужный для проекта цвет. Тогда при наведении мышкой фон плавно будет меняться.
  2. Появление рамки. Часто можно увидеть не только на кнопках, но и на разных изображениях, которые подразумевают выбор или нажатие. Появление внутренней рамки бывает мгновенным и плавным, можно выбирать разные цвета и прозрачность.
  3. Шейкер. Небольшое дрожание элемента чаще всего применяют на кнопке “Позвонить”, ты точно видел это на других сайтах. Также это может быть акцент на важном блоке или мелкой детали, которую нужно выделить, чтобы пользователь не пропустил. В этом случае для реализации эффекта применяют анимацию. Нужно будет задать такие свойства как скорость, длительность, количество повторов. Много полезностей есть в онлайн-премьере «Меню-гамбургер, popup, анимация, 3D и др. за 1.5 часа!».
  4. Затухание/подсветка. Плавное затухание или увеличение цветности элемента достигается путем изменения уровня прозрачности элемента. То есть ты задаешь базовую прозрачность, а при наведении мыши ставишь другое значение. Если оно будет ниже базы – элемент потеряет свою контрастность и станет визуально затухать. А если изначально кнопка или картинка будет полупрозрачной (например, значение 0,6), а при наведении установить непрозрачность (значение 1), то визуально элемент будет “наливаться” цветом.
  5. Увеличение. Для увеличения элемента при наведении мыши нужно добавить ему значение scale в свойстве transform в CSS. Выставляй значение в зависимости от желаемого размера. Например, значение 1,5 даст увеличение на 50%. Такой эффект классно работает на разных блоках с большим количеством однотипных деталей. Это может быть галерея отзывов – размещай мелкие с хорошей видимостью общей оценки, а при наведении они будут увеличиваться, чтобы посетитель мог их прочесть полностью.
  6. Уменьшение. По своей сути это тот же прием, что и увеличение, разница лишь в значении масштаба. Для увеличения указывается значение больше единицы, а для уменьшения – меньше единицы. Работает в процентном соотношении с сохранением пропорций.
  7. Скругление углов. Очень приятная визуально анимация, которая вроде бы дает отклик, но при этом не сильно меняет визуал объекта, не отвлекает от его сути. Часто применяется на кнопках и фотографиях. Уровень скругления можно настроить – от легкой плавности до полного превращения в круг с помощью свойства border-radius в CSS.
  8. Вращение. Та самая газета с новостями, которая летит к своему читателю с экрана. Можно установить разные углы поворота, не обязательно вращать элемент полностью, иногда достаточно проворачивать его совсем немного.
  9. Тень или утолщение. Оригинальное решение, которое дает некоторый эффект объема. Это уместно не во всех стилях, но если в принципе трехмерность изображений и элементов допустима, то рекомендуем использовать такой ховер. Смотрится он аккуратно, придает элементу дополнительный вес без его искажения, что иногда очень важно. По сути этот эффект достигается сдвигом элемента на несколько пикселей по двум осям. Добавляется свойство box-shadow, чтобы создать 3D-визуал. Красиво получается анимировать таким образом абстракции.
  10. Подчеркивание текста снизу. Классика жанра для ссылок, кнопок и переходов (к оплате, чтению политики конфиденциальности, подробному описанию и т.д.). Это удобный прием, который помогает сохранять целостность дизайна, но выделить важные аспекты.

Как научиться

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

Для большинства перечисленных выше эффектов не требуются углубленные знания программирования и будет достаточно основ верстки и владения CSS3. Этому ты научишься на нашем бесплатном курсе «Веб-верстальщик: начало». Если с версткой ты уже знаком и хочешь делать более сложные и оригинальные ховер-эффекты, то нужно углубиться в программирование и применение плагинов. Изучай Джаву на онлайн-коучинге «JavaScript: новый уровень» – набор в новую группу уже открыт!

Смотреть программу обучения