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

С помощью данного урока можно создать отличный баннер своего сайта, который будет привлекательным на остальных сайтах, без использования flash и gif анимации.

Шаг 1. HTML

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

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

Шаг 2.  CSS

Стили достаточно просты, мы определим некоторые параметры позиционирования контейнера, контуры, и некоторые мелочи, следует заметить, что часть стилей мы используем исключительно для демонстрации.

Шаг 3. jQuery

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

Вот и все. данный эффект готов! Он отлично подойдет для оформления вашего сайта.