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

 

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

Шаг 1. HTML

Cначало нам необходимо добавить изображение, для этого подойдет любое изображение, нем не нужно его разрезать на слои. Для нашего изображения мы присваиваем класс "card", а вся наша структура помещена в класс  "frame":

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

Шаг 2. CSS

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

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

Шаг 3. JS

Вся магия у нас будет осуществляться с помощью небольших правил JS, нам необходимо указать константы скорости и вращения, с последующими их вычислениями при наведении курсора мыши. Про привязку курсора к изображению мы также не забыли:

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

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

 

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