Paralaksa – JS – Rellax plugin

Realizacja paralaksy za pomocą pluginu JS (rellax.min.js)

https://github.com/dixonandmoe/rellax/blob/master/README.md

Instalacja

# npm install rellax --save

<?= $this->Html->script('rellax.min',    ['block' => true]) ?>
<?= $this->Html->script('rellax-config', ['block' => true]) ?>

relax-config.js

var rellax = new Rellax('.rellax');

Kod HTML

<div class="front-inner-textbox rellax" data-rellax-speed="2">
....

data-rellax-speed="-2" -  od -10 (wolno) do 10 (szybko)
data-rellax-percentage="0.5"  - centrowanie wzgl. rodzica
data-rellax-zindex="5"

Ustawienia domyślne dla wszystkich elementów .rellax

var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });