Параллакс-эффекты с библиотекой parallax.js

Механизм параллакса, создаваемый этой библиотекой реагирует на положение курсора, гироскоп или другое оборудование для обнаружения движения

Демо:

Сложно придумать и сделать более красивую демонстрацию работы скрипта, чем у разработчиков библиотеки.

Установка:

Скачиваем и подключаем библиотеку parallax.js или parallax.min.js

Или подключаем используя CDN

Для параллакс контейнера (сцены) задается ID, в котором все прямые дочерние элементы становятся движущимися объектами. Для каждого такого объекта задается атрибут глубины data-depth.

Чем больше значение атрибута data-depth, тем дальше будет смещаться элемент сцены

Также можно задавать отдельные оси смещения data-depth-x и data-depth-x. Подробнее смотрите в примерах

Запускаем параллакс для заданного ID

Пример:

Настройки:

Большинство параметров для контейнера с параллаксом можно задавать атрибутами data-value в HTML, либо как свойство объекта в JS, которое будет иметь приоритет над атрибутами данных.

Например:

Или

Описание настроек:

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

Подробнее об использовании методов смотрите в примере

Примеры:

Отдельные оси смещения:

Настройка relativeInput и clipRelativeInput:

Настройка hoverOnly:

В примере настройки hoverOnly и relativeInput добавлены в 2-х вариантах (HTML и JS).

Настройка inputElement:

Использование методов и настройки invertX / invertY:

Авторы: Matthew Wagerfield и René Roth
Библиотека parallax.js на github
Перевод; atuin.ru

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!