Как создать фон сайта с эффектом параллакса

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

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

Шаг 1. HTML

Для начала нам необходимо создать простую разметку в которой формируется вложение DIV-ов (один в другой) с указанием в стилях размеров и фоновой картинки.

Для реализации задумки нам понадобится плагин jQuery Parallax 0.2. Преимущество в том, что данный плагин работает во всех последних, по моему мнению конечно, популярных браузерах:

• Chrome
• Firefox
• IE8
• Opera

Шаг 2. JavaScript

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

• div.parallax – главный контейнер, его можно тоже двигать;
• initial – начальная позиция;
• multiplier – множитель или скорость движения;
• invert – инвертировать движение или нет;
• unit – еденица измерения (по умолчанию в px);

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