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

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

Шаг 1. HTML

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

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

  • Chrome
  • Firefox
  • IE8
  • Opera

Шаг 2. JavaScript

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

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

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

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