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

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

Разметка не особо сложная, для этого нам необходимо просто подключить изображения:

Для данного эффекта мы будем использовать скрипт jquery.plaxmove.js, который находиться в исходниках. Далее мы рассмотрим стили CSS, в которых мы зададим позиционирования для изображений которые будут использоваться в демонстрации:

После этого инициализируем сам плагин, который вызывается следующей командой:

Настройки

  • ratioH — модификатор движения мыши по горизонтали
  • ratioV — модификатор движения мыши по вертикали
  • reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
  • invertH — инвертирование движения мыши по горизонтали
  • invertV — инвертирование движения мыши по вертикали

Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.