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

 

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

Шаг 1. HTML

Разметка будет состоять в одной строчке кода, в которой мы подключаем стили и устанавливаем вывод изображения, при этом нам необходимо присвоить еще и значение data-ibg-bg:

 

Кроме этого не стоит забывать, что нам необходимо подключить скрипты,  которые будут отвечать за реализацию данного эффекта на странице.
Интерактивный эффект параллакса для сайта на JS

Шаг 2. JS

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

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

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

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