10 пользовательских фрагментов CSS и JavaScript для эффектов наведения и клика

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

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

Эффекты наведения кнопки

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

Каждый эффект использует чистый CSS для анимации. Пара этих кнопок использует JavaScript для событий при наведении курсора мыши, но все анимации по-прежнему управляются прямо в CSS.

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

Нав Ховерс

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

Навигационные меню обычно очень просты и универсальны. Вот почему hover-события действительно могут оживить дизайн и показать посетителям, что вам небезразличны мелкие детали.

Большинство этих анимаций достаточно просты, чтобы поместиться на любой веб-сайт, поэтому их легко копировать/вставлять в любой макет.

Эффекты наведения фото

Как часто вы находите фотогалереи со скучными субтитрами и без реального контекста? Я вижу их слишком часто, и они просто ленивы.

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

Каждый элемент отображается под разными углами, и это помогает этой галерее изображений сразу же выделяться на странице.

Подсказка CSS

Каждый браузер поддерживает всплывающие подсказки по умолчанию, но вы всегда можете создать свои собственные, используя плагины или клонируя перья, подобные этому. Он был разработан Тай Стронг и показывает, насколько далеко вы можете зайти с помощью всплывающих подсказок на чистом CSS.

Весь этот фрагмент работает, ориентируясь на HTML-тег <dfn>. При наведении на любой текст, обернутый этим тегом, он автоматически исчезает в поле зрения при наведении, появляясь в виде всплывающей подсказки.

Треугольники на чистом CSS существуют уже много лет, поэтому воссоздать стиль всплывающей подсказки достаточно просто. Но больше всего меня впечатлили плавные состояния анимации, полностью контролируемые с помощью CSS3.

Иконки CSS при наведении

Вот еще один пример чего-то классного, что можно сделать с помощью чистого CSS. Все эти простые кнопки имеют скрытые значки, которые появляются только при наведении на них курсора.

Каждая иконка предоставлена ​​Font Awesome, поэтому вы можете воспроизвести этот дизайн с помощью совершенно бесплатных иконок.

Эффекты включают в себя слайды, растяжения и исчезающие значки, которые появляются при наведении и исчезают, когда курсор перемещается в другое место.

Бесконечная нумерация страниц

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

Единственная особенность этой анимации заключается в том, что она предназначена для загрузки с одной страницы на другую. Поэтому он лучше всего работает со страницами на основе Ajax, где вся страница не перезагружается. Таким образом, вся анимация видна, пока загружается новое содержимое.

Это определенно имеет ограниченную практическую ценность, но эффект превосходен.

Наложение анимации навигации

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

Разработчик Райан Маллиган создал эту чудовищную анимацию с помощью ключевых кадров чистого CSS, работающих в одном классе CSS.

Событие клика запускается через jQuery, но движение — это все CSS. Определенно одна из самых крутых анимаций, которые я когда-либо видел, и она на удивление плавная при загрузке.

Эффект клика на чистом CSS

Материальный дизайн Google включает в себя ряд анимированных эффектов, один из которых — эффект пульсирующего клика. Это чаще всего встречается на устройствах Android, но также просочилось в Интернет.

А с помощью этой ручки вы можете воспроизвести волновой эффект в своей работе, используя только код CSS.

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

Кнопка маны

Вот один из самых уникальных эффектов кнопок, который я когда-либо видел, используя SVG для фигур и CSS для анимации.

Кодировщик Дин Хидри создал этот эффект кнопки маны, используя всего 80 строк CSS и пару десятков строк HTML (включая SVG). При наведении эта кнопка анимирует пользовательскую жидкую форму внутри кнопки для создания фоновой заливки, а затем анимирует.

Если у вас есть сайт, который может использовать этот стиль кнопок, с ним определенно стоит поиграться.

Иконическая кнопка FX

С помощью иконочных шрифтов можно многое сделать, и эти анимированные кнопки Дэвида Дарнса — отличный пример.

Иконки анимируются по-разному при наведении курсора, каждая со своим фирменным эффектом. Вы можете не использовать все эти значки на одном веб-сайте, но пользовательские стили анимации легко клонировать. Они работают исключительно на CSS3 и подходят к любому шрифту значка, который вы выберете. Действительно забавный эффект для клонирования практически любого веб-сайта!

И это завершает мой список UX-эффектов, но это, конечно, не окончательная коллекция.

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