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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree