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

 

Для начала Вам необходимо приготовить приготовить интересующие картинки, которые Вы хотите видеть в эффекте параллакса:

Затем мы приступаем к первому шагу это HTML и выглядит этот шаг так:

Если разобраться то все гениально просто, но следует заметить, что для того, чтобы все работало нам стоит подключить два фреймворка, не забудьте указать правильным к ним путь, далее нам надо вызвать функцию javascript которая будет связывать jParallax с div-ом #parallax, в нем мы пропишем собственные слои:

Хочу рассказать о важных нюансах, высота и широта каждого элемента должны прописаны в CSS, Для главного элемента параллакса (#parallax) нужно прописать относительное или абсолютное позиционирование (position:relative или position:absolute), вот на этом пожалуй и все, надеюсь у вас все получится.

На главную