Прежде всего, мы бы хотели пояснить, для тех, кто не знает, что такое hover-эффекты, мы немного объясним. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3. Сегодня мы хотели бы поделиться некоторыми экспериментальными эффектами при наведении курсора мыши.

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

Шаг 1. HTML

Разметка достаточно простая, нам необходимо добавить общий  tilter tilter--2, в затем мы добавили якорь с интересующим нас материалом:

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

Шаг 2. CSS

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

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

Шаг 3. JS

В настройках мы можем определить, какие движения будут происходить для каждого элемента при наведении курсора:

  • Мы можем установить следующие значения: движение и вращение для всех осей и анимация (продолжительность, ослабление и эластичность - таким же образом, как варианты anime.js), чтобы вернуться к стилю по умолчанию.
  • Для поступательного и вращательного движения, мы можем определить значения каждой оси следующим образом:
    • number: Например, перевод: {х: 10, у: -10} означает, что элемент будет перемещаться вдоль оси х от -10px до 10px (как мы перемещаем мышь слева направо) и на оси у от 10px до -10px (как мы перемещаем мышь сверху вниз).
    • array: Например, перевод: {г: [10100]} означает, что элемент будет перемещаться вдоль оси от 10px до 100px (как мы перемещаем мышь сверху вниз).

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

Вот и все. Готово!

Читайте также: