Эффекты наклона при наведении мыши

Эффекты наклона при наведении мыши

От автора: сегодня мы поделимся с вами экспериментальными эффектами. Мы вдохновлялись эффектом hover, который увидели на сайте Kikk 2015, созданным студией Dogstudio. Нам нужно анимировать изображение (это может быть ссылка или просто элемент сетки) с эффектом наклона отдельных частей. На одном элементе у нас будет несколько наклоняемых частей (рычагов), с помощью которых можно создать множество интересных эффектов. Для создания эффекта нам понадобится изображение, слой с бликом, полупрозрачный слой с цветным градиентом, рамка и подпись. В примерах ниже показано, как их можно анимировать. Надеемся, вам понравится.

демо скачать исходники

Предупреждение: некоторые из техник слишком экспериментальные и не будут работать ни в одном браузере. Мы используем такие вещи, как flexbox, перспективу, а в последнем примере — режимы наложения.

HTML структура рычага

Вот так будет выглядеть наш рычаг. Мы используем ссылку:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как видно, в коде представлены все вышеупомянутые элементы.

Стили для рычага

JavaScript

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

Можно передать трансформацию и вращение по всем осям и для всех анимаций, чтобы вернуться к стилям по умолчанию (длительность, функция анимации и упругость – как в anime.js).

Для свойства translate и вращения можно задавать значения для каждой оси следующим образом:

number: например, translation : {x: 10, y: -10}. Элемент будет двигаться вдоль оси Х от -10px до 10px (при движении мыши слева направо) и по оси У от 10px до -10зч (при движении мыши сверху вниз).

array: например, translation : {z: [10,100]}. Элемент будет двигаться вдоль оси Z от 10px до 100px (при движении мыши сверху вниз)

Надеемся, вам понравились эффекты, и вы вынесли из этого урока что-то полезное и вдохновляющее! Проект на Github.

Автор: Mary Lou

Источник: https://tympanus.net/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий