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

 

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

Шаг 1. HTML

Разметка будет достаточно простой, у нас будет контейнер, в котором мы устанавливаем классы для описание, а также для изображения и соответственно пути к нему.

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

Шаг 2. CSS

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

Шаг 3. JS

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

В результате у нас получился замечательный и простой параллакс. Спасибо за идею Maurice Melchers. А как вам такой эффект?

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