Ховер-ефект – це коли при наведенні мишки на об'єкт він реагує: змінюється колір кнопки, з'являється підсвітка, картинка трохи рухається або збільшується, спливає інформаційний напис, змінюється колір посилання тощо. Варіантів ховера дуже багато, вони залежать від фантазії та майстерності розробника.
Навіщо це потрібно
Ховер-ефект – річ досить проста, але саме такі дрібниці роблять сайт живим та привабливим. Це дуже корисне впровадження, яке допомагає користувачеві зорієнтуватися. Адже якщо при наведенні мишки елемент відгукується, то стає зрозуміло, що ти на правильному шляху. Якщо це кнопка, то ефект дає зрозуміти, що ти по ній потрапив і можна натискати. Якщо це таблиця, то в ній можуть підсвічуватися стовпці для більш зручного перегляду.
Ще один плюс ховер-ефекту – це можливість не перенасичувати сайт інформацією, зробити його лаконічним, але інформативним. Наприклад, тобі потрібно зробити сторінку з рекламою оренди офісних приміщень. Ти розміщуєш там схематичне зображення будівлі. При наведенні мишкою на поверхи, вони підсвічуються, показуючи більш детальне планування. Там же може з'являтися інформація про площу, ціну та інші подробиці. І ось, твоя сторінка виглядає акуратно, там немає нічого зайвого. Відвідувач читає тільки ті відомості, які його цікавлять, не перевантажуючи мозок зайвою інформацією. Зручно, стильно, наочно.
Як використовувати ховер
Необов'язково робити ефекти наведення функціональними. Це також ігрові моменти та "пасхалки", які додають сайту динаміки і допомагають завоювати увагу та довіру користувача.
Погодься, досить весело зависати на сайті з картинками котиків, якщо вони стежать очима за твоїм курсором. Зроби щось оригінальне, це сподобається твоїй аудиторії та замовнику. Сайти з ховером завжди конвертують краще, ніж без нього – зроби два ідентичних варіанти з ховер-ефектами і без них, проведи АБ-тести і переконайся в цьому самостійно.
Тут також важливо дотримуватися принципу помірності – занадто багато анімації, агресивні ефекти та різкі переходи будуть дратувати. Використовуй плавність, ненав'язливість. Якщо це колір, то не надто кричущий, якщо рух, то з невеликою амплітудою.
Розглянемо 5 стильних і незвичайних ховер-ефектів, які прикрасять твій наступний проєкт.
Як навчитися
Стандартні ховер-ефекти робляться за допомогою впровадження переходів через CSS3. Елемент трансформується в переходах, за допомогою яких змінюється його стиль. Задається параметр змін при наведенні курсора. Для мобільних пристроїв потрібно окреме ПЗ для реалізації цієї функції, якщо замість курсора там використовується сенсор.
Ти можеш навчитися робити hover-ефекти у Figma на нашому безкоштовному курсі «Веб-дизайнер: вибуховий старт» 🔥
Згодом, ти зможеш перенести їх у верстку за допомогою Webflow або Framer.