Простой способ создания параллакса с помощью плагина Parallax.js

Плагин Parallax.js позволяет создать простой параллакс-эффект при прокрутке страницы.

Загрузка

Загрузить parallax.js можно по ссылке с github или подключив через пакетный менеджер:

npm:

  npm i --save jquery-parallax.js

yarm:

  yarn add jquery-parallax.js

bower (не рекомендуется):

  bower i --save parallax.js

Использование

Необходим jQuery версии не ниже 1.7. Существует несколько способов добавления параллакса:

Использование data-атрибутов у html-тега:

Для создания простого параллакс эффекта элементу задается класс .parallax-window, а так же атрибуты data-parallax="scroll" (включает эффект параллакса при прокрутке страницы) и data-image-src="/path/to/image.jpg" (данный атрибут содержит путь к изображению, которое вы хотите использовать для эффекта).

Использование JavaScript:

Вручную выберите элемент с помощью jQuery и вызовите плагин.

  $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

Параметры

Настройки плагина могут изменяться с использованием JavaScript. В том случае, если необходимо использовать для этого html-аттрибуты - используйте префикс data- перед названием параметра, а так же добавляйте дефис в качестве разделителя между словами. (Например, параметр imageSrc будет выглядеть, как data-image-src.