Hover-эффект
Hover-эффект – это технология веб-анимации, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним.
Ховеры включают в себя множество разнообразных эффектов: изменение цвета, всплывающие подсказки и иные подписи, увеличение/смещение/трансформация/ротация объектов, плавные переходы и т.д.
Hover-эффекты способны сделать интерфейс сайта гораздо более ярким, оригинальным и привлекающим внимание посетителей. Очень часто ховерами оснащают кнопки ссылок, после чего они изменяют/инвертируют цвет, становятся прозрачными или увеличиваются в размерах при наведении курсора.
Свяжите сервисы между собой без программистов за 5 минут!
Как настроить выгрузку данных из WooCommerce в TurboSMS?
Как настроить выгрузку новых заказов из Lamoda в виде сделок в AmoCRM?
Hover-эффекты можно создавать как вручную (используя возможности языков HTML/CSS), так и при помощи встроенных инструментов популярных конструкторах сайтов: Wix, Tilda и других.
Настроить интеграцию без программистов ApiX-Drive
Статьи о маркетинге, автоматизации и интеграциях в нашем Блоге
Что такое ховер в веб-дизайне и для чего он применяется
Грамотные специалисты и разработчики в области web-дизайна отмечают, что от удобства взаимодействия пользователя с сайтом во многом зависит лояльность, стремление заходить на веб-страничку в будущем. Для этого сегодня активно используется hover-эффекты, однако о них знают далеко не все. Учитывая актуальность и востребованность такой функции, наверняка многим людям будет интересно подробнее узнать о том, что такое ховер в веб-дизайне и какую пользу он способен принести.
Карточка посередине выделяется при наведении.
Особенности и варианты эффектов
Итак, ховер – это интересная технология web-анимации, с помощью которой элементы сайта изменяют внешний вид при наведении на них курсора или мыши. Данный эффект подчеркивает интерфейс сайта, делая его более оригинальным и необычным, привлекающим внимание человека. Современные ховеры в дизайне отличаются разнообразием эффектов, где можно выделить следующее:
Ротация объекта
Изменение цвета иконки
Всплывание подсказки, надписи
Плавный переход
Трансформация элемента
Увеличение/уменьшение размера объекта
Как можно увидеть, существует множество вариантов исполнения hover-эффектов, что открывает широкие возможности для разработчиков и дизайнеров. Все ограничивается исключительно фантазией и уровнем подготовки специалиста, поскольку широкий функционал современных программ позволяет воплотить в жизнь практически любую задумку.
Ховер эффект с изменением цвета границ кнопки.
Какие преимущества дает ховер-эффект?
Чтобы web-страничка вызывала у посетителей приятные эмоции, была полезной и удобной, разработчики уделяют особое внимание фоновому дизайну, подбору тематических картинок, грамотному расположению блоков и удобной навигации в целом. Добавление такой функции, как ховер, вызывает дополнительный интерес со стороны пользователя, делая его более привлекательным в глазах человека. Hover-эффект дает такие преимущества:
Добавление web-сайту анимации, что делает его более «живым»
Возможность посетителю лучше ориентироваться в ссылочной массе
Удобство просмотра отдельных блоков данных (к примеру, подсвечивание текста в таблице)
Улучшение пользовательского опыта
Практика показывает, что использование ховера в веб дизайне делает сайт более информативным и лаконичным, не перегружая информацией. Это улучшает восприятие в глазах посетителя, которому становится легче находить нужную информацию, ориентироваться по навигации.
Создание ховеров в дизайне
Обычно hover-эффекты разрабатывают и внедряют при помощи встроенных инструментов, а также популярных конструкторов по типу Tilda и Wix. Однако такую функцию можно создать и вручную при помощи гиперразметки HTML и таблицы стилей CSS. Для реализации таких эффектов от дизайнера не требуются углубленные знания программирования. Достаточно будет навыков в CSS3, а также понимания основ верстки. К числу самых распространенных hover эффектов можно отнести такие:
Возникновение рамки. Такая граница может появляться мгновенно или выплывать постепенно, причем иметь определенную степень прозрачности и конкретный цвет.
Карточка выделена черной рамкой.
Шейкер. Эффект небольшого дрожания, который чаще всего устанавливается на кнопке «Call». Нередко также реализуется на блоке с важной информацией.
Изменение расцветки. Такой hover подчеркивает активность элемента для посетителя, причем фон и степень заливки может быть разной.
Кнопка выделена синим цветом.
Плавное увеличение/уменьшение элемента. Функция реализуется при помощи значений Transform и Scale в CSS.
Ротация или вращение. Очень эффектная анимация, использовать которую нужно с осторожностью. Обычно применяется на новостных страничках.
Подсветка/затухание. Эффект достигается за счет изменения степени прозрачности элемента.
Появление тени. Достаточно оригинальное и интересное решение, с помощью которого можно добиться объема. Используя функцию box-shadow можно создать 3D-эффект.
Закругление углов. Достаточно популярная анимация, которая дает весьма приятный визуальный эффект. Обычно используется на фотографиях, что делает их более изящными. При этом уровень округления можно менять, добиваясь желаемого значения.
Подчеркивание текста. Удобная функция, которая позволяет выделить главную мысль, подчеркнуть нужный аспект.
Выводы
Сайты с ховерами являются очень интересными для всех посетителей, поскольку взаимодействие здесь происходит интерактивным образом. Это делает пользователя более включенным в процесс, где анимация способствует «включенности» в процесс. Благодаря этому человек дольше остается на сайте, а поэтому лучше узнает о нем, становится более лояльным, что повышает вероятность перехода в категорию постоянных посетителей.
Ховеры бывают разные
Когда у нас в eLama компонентов в библиотеке стало достаточно много, мы заметили, что ховеры не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д.
Мы делали это не со зла, в отдельных проектах так работало лучше, но глядя на интерфейс в целом, стало понятно, что это проблема.
Не всё бывает тем, чем кажется
При разработке интерфейсов мы опираемся на принцип — то, что ты делаешь должно работать так, как того будет ожидать пользователь. Если пользователь видит перед собой кнопку, то он будет ожидать от нее поведение кнопки, а значит она должна и вести себя ожидаемо.
Например, у нас в библиотеке есть ссылка и кнопка, визуально похожая на ссылку. Из-за того, что в их поведении при ховере не было сильного различия, мог возникать вопрос, что произойдет при нажатии — перекинет на другую страницу, или действие будет на текущей странице. Поначалу даже были случаи, когда разработчики использовали кнопку, как ссылку, руководствуясь тем, что она выглядит и ведет себя при ховере похоже на ссылку.
Какие ховеры вообще бывают
1. Изменение фона (появление подложки или изменение ее цвета)
2. Изменение бордера (появление или смена цвета)
3. Изменение цвета иконки или текста
4. Изменение местоположения
5. Добавление эффектов (тени, градиенты и т.д.)
6. Сложные ховеры (изменение размера, формы и т.д.)
На самом деле, типов ховеров может быть и больше, здесь перечислены, наверно, самые основные, и я думаю в комментариях вы сможете упомянуть еще какие-то.
Наводим порядок
Button, SelectList, Table, Chip, Lable, Switch, Pagination, навигация в левом меню
Какой тип решили использовать: Изменение фона
Кнопки в этой группе оказались самыми проблемными — у них оказалось сразу 3 типа ховера.
Мы решили сделать появление подложки единого цвета у кнопок, которые изначально не имеют никакого фона. Кнопки визуально похожие на ссылки получают важное отличие от ссылок при ховере.
Смену цвета у иконки мы оставили для активного состояния кнопки (например: tooltip или кнопка фильтров) и для того случая, когда зона наведения больше стандартного размера кнопки (например, у нас это кнопка закрытия toast)
Rating
Какой тип решили использовать: Изменение фона и изменение цвета иконки
В этом случае мы не стали менять тот ховер, какой был. Кнопка рейтинга похожа на обычной кнопку-иконку, у нее так же есть активное состояние, но эмоциональное значение у нее больше. Поэтому, чтобы усилить его, мы используем сразу два типа ховера.
RadioLine, CheckLine и Tab
Какой тип решили использовать: Изменение цвета текста
Приводим ховер в RadioLine, CheckLine к виду текущего ховера у табов — изменяем только цвет текста при наведении.
Убиваем двух зайцев разом: избавляемся от типа ховера с появлением обводки и улучшаем анимацию у RadioLine — в варианте с обводкой при перемещении синей подложки иногда заметно исчезающую обводку, что выглядит некрасиво.
Checkbox
Какой тип решили использовать: Изменение фона и бордера
Тут все просто: у компонента есть два состояния — выбранный и не выбранный — и соответственно два типа ховера — меняется фон и меняется бордер.
Input, MultiInput, TextArea, Select, Radiobutton
Какой тип решили использовать: Изменение бордера
Ховер на сложные элементы
У сложных элементов вроде карточки задачи на канбан-доске мы решили делать анимацию добавления эффекта при ховере — появление тени. Мы выбирали между тенью и появлением обводки, но обводку отмели, потому что обводка может частично теряться в элементе, в котором есть темные части по краям.
Но есть исключения
InputFile
У этого компонента есть два типа ховера — обычное наведение мышкой и перетаскивание файлов. Появление подложки при перетаскивании файлов это привычное поведение для такой кнопки, поэтому для обычного ховера оставляем смену цвета у иконки, чтобы эти два типа оставались разграниченными между собой.
Link Button
Не добавляем появление подложки, чтобы оставить визуальное отличие от кнопки при наведении.
Про анимацию ховеров
Практически у всех наших компонентов у ховера есть плавная анимация, но она нужна не всегда.
Без такой анимации можно обойтись в боковом меню, выпадающем списке и таблице. В том, что имеет структуру строк. Плавная анимация в таких случаях может выглядеть очень тягучей, если сделать ее слишком медленной, потому что она будет не поспевать за курсором. А если сделать ее слишком быстрой, то будет излишнее мерцание.
Но может быть и частичная анимация, например, так мы сделали у пагинации — при наведении на номер страницы подложка появляется плавно, но когда курсор уходит с нее, подложка исчезает мгновенно. Это было сделано, чтобы избежать ситуации, когда проводишь курсор по цифрам быстро и одновременно видны несколько подложек, потому что новые появляются, когда предыдущие еще не успели исчезнуть.
- ховер
- дизайн-система
- библиотека компонентов
Что такое hover эффект? — TemplateMonster
Hover определяет стиль элемента при наведении на него курсора мыши.
Что такое hover?
Ховер помогает сделать дизайн сайта более интересным и побуждающим пользователя получить дополнительную информацию о теме ссылки.
Например, при наведении курсора мыши на одну из ссылок на странице, она может изменить цвет, указывая, что на нее можно нажать. Обычно такие ссылки добавляются на страницы или в тексты, чтоб переходя по ним, пользователь узнавал более точную информацию или переходил на страницу определенного товара для осуществления покупки.
На скрине выше показан пример изменения цвета при наведении курсора на определенную новость.
Примечание: Для смартфонов и планшетов, использующих палец вместо компьютерной мышки, невозможно навести курсор на объект без стороннего программного обеспечения.
Синтаксис
Пример
Basic example
HTML
CSS
Результат:
Ховер и галерея
Итак, что такое ховер понятно, но его можно использовать не только для подсветки текстовых ссылок.
Вы можете использовать :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда мышь наводится на миниатюру.
Все эти приемы помогают сделать сайт более современным и интересным, а пост не перенасыщать информацией, добавляя ссылки, по которым пользователь сможет получить дополнительную информацию. А ховер помогает сфокусировать внимание читателей на этих ссылках.