Демо:
Сложно придумать и сделать более красивую демонстрацию работы скрипта, чем у разработчиков библиотеки.
Установка:
Скачиваем и подключаем библиотеку parallax.js или parallax.min.js
Или подключаем используя CDN
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> |
Для параллакс контейнера (сцены) задается ID, в котором все прямые дочерние элементы становятся движущимися объектами. Для каждого такого объекта задается атрибут глубины data-depth
.
Чем больше значение атрибута data-depth
, тем дальше будет смещаться элемент сцены
1 2 3 4 |
<div id="scene"> <div data-depth="0.2">Дальный слой</div> <div data-depth="0.6">Ближний слой</div> </div> |
Также можно задавать отдельные оси смещения data-depth-x
и data-depth-x
. Подробнее смотрите в примерах
Запускаем параллакс для заданного ID
1 2 |
var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene); |
Пример:






Настройки:
Большинство параметров для контейнера с параллаксом можно задавать атрибутами data-value
в HTML, либо как свойство объекта в JS, которое будет иметь приоритет над атрибутами данных.
Например:
1 2 3 4 |
<div data-relative-input="true" id="scene"> <div data-depth="0.2">Дальный слой</div> <div data-depth="0.6">Ближний слой</div> </div> |
Или
1 2 3 4 |
var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene, { relativeInput: true }); |
Описание настроек:
relativeInput
Свойство: relativeInput
Атрибут: data-relative-input
Значения: true
или false
По умолчанию: false
Реагирует на движение мыши относительно положения элемента сцены.
При использовании гироскопа эффект отсутствует.
Для наглядности смотрите пример
clipRelativeInput
Свойство: clipRelativeInput
Атрибут: data-clip-relative-input
Значения: true
или false
По умолчанию: false
Ограничивает реакцию на движение мыши за границами сцены до максимального значения, которое было бы возможно внутри ее элемента.
Эффект отсутствует при использовании гироскопа, включенной настройкой hoverOnly
или выключенной relativeInput
Для наглядности смотрите пример
hoverOnly
Свойство: hoverOnly
Атрибут: data-hover-only
Значения: true
или false
По умолчанию: false
Параллакс будет действовать только тогда, когда курсор находится над элементом сцены, иначе все слои вернутся в исходное положение. Лучше всего работает в сочетании с relativeInput
.
При использовании гироскопа эффект отсутствует
Для наглядности смотрите пример
inputElement
Свойство: inputElement
Атрибут: data-input-element
Метод: setInputElement(HTMLElement)
Значения: null
или HTMLElement
По умолчанию: null
Позволяет использовать другой элемент, движение курсора в котором задействует параллакс.
Работает только в сочетании с relativeInput
, тоже имеет смысл установка hoverOnly
.
При использовании гироскопа эффект отсутствует
Для наглядности смотрите пример
calibrateX и calibrateY
Свойство: calibrateX
и calibrateY
Атрибут: data-calibrate-x
и data-calibrate-y
Метод: calibrate(x, y)
Значения: true
или false
По умолчанию: false
для X, true
для Y
Кэширует начальное значение оси X / Y при инициализации и вычисляет относительно этого движение.
Нет эффекта при использовании курсора.
invertX и invertY
Свойство: invertX
и invertY
Атрибут: data-invert-x
и data-invert-y
Метод: invert(x, y)
Значения: true
или false
По умолчанию: true
Инвертирует движение элементов в параллакс контейнере.
Для наглядности смотрите пример
limitX и limitY
Свойство: limitX
и limitY
Атрибут: data-limit-x
и data-limit-y
Метод: limit(x, y)
Значения: false
или целое число
По умолчанию: false
Ограничивает перемещение слоев по соответствующей оси. Значения false
дает полную свободу движению.
scalarX и scalarY
Свойство: scalarX
и scalarY
Атрибут: data-scalar-x
и data-scalar-y
Метод: scalar(x, y)
Значения: число с плавающей точкой
По умолчанию: 10.0
Увеличивает или уменьшая скорость и дальность движения.
frictionX и frictionY
Свойство: frictionX
и frictionY
Атрибут: data-friction-x
и data-friction-y
Метод: friction(x, y)
Значения: число с плавающей точкой между 0 и 1
По умолчанию: 0.1
Скорость перехода элементов сцены на новые позиции. При значении 1 слои перейдут на них мгновенно.
originX и originY
Свойство: originX
и originY
Атрибут: data-origin-x
и data-origin-y
Метод: origin(x, y)
Значения: число с плавающей точкой между 0 и 1
По умолчанию: 0.5
Позиция X и Y курсора, относительно которых происходит смещение элементов сцены. Значение по умолчанию 0,5 относится к центру экрана или элемента, 0 - это левая (ось X) или верхняя (ось Y) граница, 1 - правая или нижняя.
При использовании гироскопа эффект отсутствует
precision
Свойство: precision
Атрибут: data-precision
Значения: целое число
По умолчанию: 1
Округление десятичных дробей позиции элементов
selector
Свойство: selector
Атрибут: data-selector
Значения: null
или string
По умолчанию: null
Селектор внутри сцены, для которого будет применен параллакс. При значении null
будут перемещаться все ее прямые дочерние элементы
pointerEvents
Свойство: pointerEvents
Атрибут: data-pointer-events
Значения: true
или false
По умолчанию: false
Значение true
включает взаимодействие с элементами сцены и слоя. Это нужно, например, при использовании в параллаксе ссылок, кнопок и т.д.
Установка этого значения сама по себе не будет достаточной для полного взаимодействия со всеми слоями, так как они будут перекрываться.
onReady
Свойство: onReady
Значения: null
или функция
По умолчанию: null
Функция обратного вызова, которая будет вызвана, как только Parallax завершит свою настройку.
Методы:
В дополнение к методам, описанных в настройках, существует еще общедоступные:
enable()
Включает отключенный параллакс.
disable()
Отключает включенный параллакс.
destroy()
Полностью уничтожает параллакс
version()
Возвращает номер версии библиотеки Parallax
Подробнее об использовании методов смотрите в примере
Примеры:
Отдельные оси смещения:






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="scene" class="scene"> <div data-depth="1.00"> <img src="image-1.png"> </div> <div data-depth-x="0.80" data-depth-y="-0.80"> <img src="image-2.png"> </div> <div data-depth-x="-0.60" data-depth-y="-0.20"> <img src="image-3.png"> </div> <div data-depth="0.40" data-depth-y="-0.30"> <img src="image-4.png"> </div> <div data-depth="0.20"> <img src="image-5.png"> </div> <div data-depth="0.00"> <img src="image-6.png"> </div> </div> |
1 2 |
var scene = document.getElementById('scene'); var parallax = new Parallax(scene); |
Настройка relativeInput
и clipRelativeInput
:






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="scene" class="scene"> <div data-depth="1.00"> <img src="image-1.png"> </div> <div data-depth="0.80"> <img src="image-1.png"> </div> <div data-depth="0.60"> <img src="image-2.png"> </div> <div data-depth="0.40"> <img src="image-3.png"> </div> <div data-depth="0.20"> <img src="image-4.png"> </div> <div data-depth="0.00"> <img src="image-5.png"> </div> </div> <input type="checkbox" id="relative" checked> <label for="relative">relativeInput</label> <input type="checkbox" id="clip"> <label for="clip">clipRelativeInput</label> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var scene = document.getElementById('scene'); var clipCheckbox = document.getElementById('clip'); var relativeCheckbox = document.getElementById('relative'); var parallax = new Parallax(scene, { relativeInput: relativeCheckbox.checked, clipRelativeInput: clipCheckbox.checked }); relativeCheckbox.addEventListener('change', function(event) { parallax.relativeInput = relativeCheckbox.checked; }); clipCheckbox.addEventListener('change', function(event) { parallax.clipRelativeInput = clipCheckbox.checked; }); |
Настройка hoverOnly
:






В примере настройки hoverOnly
и relativeInput
добавлены в 2-х вариантах (HTML и JS).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="scene" class="scene" data-hover-only="true" data-relative-input="true"> <div data-depth="1.00"> <img src="image-1.png"> </div> <div data-depth="0.80"> <img src="image-1.png"> </div> <div data-depth="0.60"> <img src="image-2.png"> </div> <div data-depth="0.40"> <img src="image-3.png"> </div> <div data-depth="0.20"> <img src="image-4.png"> </div> <div data-depth="0.00"> <img src="image-5.png"> </div> </div> |
1 2 3 4 5 |
var scene = document.getElementById('scene'); var parallax = new Parallax(scene, { hoverOnly: true, relativeInput: true }); |
Настройка inputElement
:







1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="scene" class="scene"> <div data-depth="1.00"> <img src="image-1.png"> </div> <div data-depth="0.80"> <img src="image-1.png"> </div> <div data-depth="0.60"> <img src="image-2.png"> </div> <div data-depth="0.40"> <img src="image-3.png"> </div> <div data-depth="0.20"> <img src="image-4.png"> </div> <div data-depth="0.00"> <img src="image-5.png"> </div> </div> <div id="scene-input"></div> |
1 2 3 4 5 6 7 |
var scene = document.getElementById('scene'); var input = document.getElementById('scene-input'); var parallax = new Parallax(scene, { hoverOnly: true, relativeInput: true, inputElement: input }); |
Использование методов и настройки invertX
/ invertY
:






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="scene" class="scene"> <div data-depth="1.00"> <img src="image-1.png"> </div> <div data-depth="0.80"> <img src="image-1.png"> </div> <div data-depth="0.60"> <img src="image-2.png"> </div> <div data-depth="0.40"> <img src="image-3.png"> </div> <div data-depth="0.20"> <img src="image-4.png"> </div> <div data-depth="0.00"> <img src="image-5.png"> </div> </div> <button id="invert">Инвертировать движение</button> |
1 2 3 4 5 |
var scene = document.getElementById('scene'); var parallax = new Parallax(scene); document.getElementById('invert').onclick = function() { parallax.invert(false, false); }; |
Авторы: Matthew Wagerfield и René Roth
Библиотека parallax.js на github
Перевод; atuin.ru
сволочи котами прикрываются !!!