Думаю каждому из вас нравится параллакс, он притягивает взор своей индивидуальностью и подходом к анимации. Сегодня мы бы хотели показать как можно создать замечательный параллакс-эффект для изображений сайта при помощи js. У нас будет эффект зума с параллаксом, это необычное сочетание позволяет нам по новому взглянуть на эффект параллакса. Для достижения такого эффекта мы будем использовать плагин Parazoom-это прекрасный плагин jQuery, который применяет плавные, интерактивные, масштабируемые и панорамные функции для изображений при наведении курсора.

 

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

Шаг 1. HTML

Как вы знаете, нам необходимо создать разметку, но перед этим давайте подключим все необходимые скрипты:

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

Двигаемся дальше, перейдем к разбору самого плагина и то как он работает.

Шаг 2. JS

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

Чтобы показать альтернативный текст на изображении при наведении курсора:

Настроим свой курсор при наведении на изображение:

В конце мы рассмотрим стандартные настройки плагина:

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

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