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

Демо:

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

Установка:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

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

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

<div id="scene">
  <div data-depth="0.2">Дальный слой</div>
  <div data-depth="0.6">Ближний слой</div>
</div>

<div data-depth="0.2">Дальный слой</div>

<div data-depth="0.6">Ближний слой</div>

</div>

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

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

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

1 2	var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene);

Пример:

Настройки:

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

Например:

<div data-relative-input="true" id="scene">
	<div data-depth="0.2">Дальный слой</div>
	<div data-depth="0.6">Ближний слой</div>
</div>

<div data-depth="0.2">Дальный слой</div>

<div data-depth="0.6">Ближний слой</div>

</div>

Или

var scene = document.getElementById('scene');
	var parallaxInstance = new Parallax(scene, {
	relativeInput: true
});

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

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

Примеры:

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

<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>

</div>

</div>

</div>

</div>

</div>

</div>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

1 2	var scene = document.getElementById('scene'); var parallax = new Parallax(scene);

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

relativeInput clipRelativeInput

<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>

</div>

</div>

</div>

</div>

</div>

</div>

<label for="relative">relativeInput</label>

<label for="clip">clipRelativeInput</label>

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;
});

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).

<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>

</div>

</div>

</div>

</div>

</div>

</div>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
	hoverOnly: true,
	relativeInput: true
});

var scene = document.getElementById('scene');

var parallax = new Parallax(scene, {

hoverOnly: true,

relativeInput: true

});

Настройка `inputElement`:

<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>

</div>

</div>

</div>

</div>

</div>

</div>

var scene = document.getElementById('scene');
var input = document.getElementById('scene-input');
var parallax = new Parallax(scene, {
    hoverOnly: true,
    relativeInput: true,
    inputElement: input
});

var scene = document.getElementById('scene');

var input = document.getElementById('scene-input');

var parallax = new Parallax(scene, {

hoverOnly: true,

relativeInput: true,

inputElement: input

});

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

<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>

</div>

</div>

</div>

</div>

</div>

</div>

<button id="invert">Инвертировать движение</button>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
document.getElementById('invert').onclick = function() {
	parallax.invert(false, false);
};

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

Демо:

Установка:

Пример:

Настройки:

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

Методы:

Примеры:

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

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

Настройка `hoverOnly`:

Настройка `inputElement`:

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

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

Анимированный Tab Bar

Адаптивная таблица на CSS

3D табы с картинкой и описанием

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

Комментарии:

Демо:

Установка:

Пример:

Настройки:

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

Методы:

Примеры:

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

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

Настройка hoverOnly:

Настройка inputElement:

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

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

Анимированный Tab Bar

Адаптивная таблица на CSS

3D табы с картинкой и описанием

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

Комментарии:

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

Настройка `hoverOnly`:

Настройка `inputElement`:

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