Rellax — параллакс библиотека

Написанная на чистом jаvascript параллакс библиотека. Плавные движения, малый размер и поддержка мобильных устройств.

HTML

Примеры использования с указанием в атрибуте data-rellax-speed скорости движения.

<div class="rellax">
  я двигаюсь с дефолтной скоростью "-2"
</div>
<div class="rellax" data-rellax-speed="7">
  Я двигаюсь очень быстро
</div>
<div class="rellax" data-rellax-speed="-4">
  Я двигаюсь очень медленно и плавно
</div>

JS

Подключаем скрипт библиотеки

<script src="rellax.min.js"></script>
<script>
  // применяется ко всем блокам с классом .rellax
  var rellax = new Rellax('.rellax');
</script>

Можно указать дополнительные параметры для блоков

<script>
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    round: true,
    vertical: true,
    horizontal: false
  });
</script>

Возможности

Центрирование

Возможность центрирования параллакс элементов во viewport-e.
Есть два способа: персонально для элемента или глобально для всех.

<div class="rellax" data-rellax-percentage="0.5">
  я двигаюсь с дефолтной скоростью "-2" и центрируюсь
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5">
  Я двигаюсь очень быстро и центрируюсь
</div>
<div class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">
  Я двигаюсь очень медленно и плавно и центрируюсь
</div>

<script>
  // Центрируются все элементы
  var rellax = new Rellax('.rellax', {
    center: true
  });
</script>

z-index

Если есть необходимость в сортировке элементов по оси Z, то есть атрибут data-rellax-zindex

<div class="rellax">
  я двигаюсь с дефолтной скоростью "-2" и дефолтно имею z-index равный 0
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-zindex="5">
я двигаюсь очень быстро и расположен над предыдущим элементом, у меня z-index равен 5
</div>

Горизонтальный параллакс

Горизонтальный параллакс отключен по умолчанию. Можно в настройках включить параметр horizontal: true для добавления возможности.
Эта функция предназначена для сайтов с панорамным стилем, где нужно перемещаться горизонтально, а не сверху вниз вертикально. При этом горизонтальный параллакс может одновременно работать и с включенным вертикальным параллаксом

Уничтожение

<script>
  // Запустить Rellax
  var rellax = new Rellax('.rellax');

  // Остановить Rellax и вернуть параллакс элементы в их оригинальное положение
  rellax.destroy();
</script>

Обратный вызов

<script>
  // Запустить Rellax
  var rellax = new Rellax('.rellax-blur-card', {
    callback: function(positions) {
      // callback every position change
      console.log(positions);
    }
  });
</script>