Параллакс эффект

Параллакс эффект при перемещениях курсора и эффект mix-blend-mode применяемый для текста

HTML

<div id="scene" data-relative-input="true" class="parallax">
  <div data-depth="0.4" class="text-center">
    <img id="mountain" src="http://www.design-fenix.com.ar/parallax/mountain.png" alt="">
  </div>
  <h1 data-depth="0.2" class="text-center">PARALLAX</h1>
  <div data-depth="0.3" class="text-center">
    <img id="island" src="http://www.design-fenix.com.ar/parallax/island.png" alt="">
  </div>
  <div data-depth="0.3" class="text-center">
    <img id="birds" src="http://www.design-fenix.com.ar/parallax/bird.png" alt="">
  </div>
  <div data-depth="0.1" class="text-center">
    <img id="boat" src="http://www.design-fenix.com.ar/parallax/boat.png" alt="">
  </div>
  <h2 data-depth="0.1" class="text-center">BLENDING CSS OPTIONS</h2>
</div>

LESS

/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
.dev{
  position: fixed;
  top:0;
  left:0;
  padding: 1em;
  background-color: white;
}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:700');
body{
  background-color: #f4f9fa;
}
.parallax{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
  text-align: center;
  h1{
    font-family: 'Noto Sans', sans-serif;
    position: absolute;
    text-transform: uppercase;
    margin-top: 190px;
    font-size: 110px;
    color: #eaeaea;
    mix-blend-mode: hard-light;
    text-shadow: 5px 5px 10px rgba(0,0,0,.2), -1px -1px 25px rgba(0,0,0,.1);
    letter-spacing: -10px;
  }
  h2{
    font-family: 'Noto Sans', sans-serif;
    position: absolute;
    text-transform: uppercase;
    margin-top: 315px;
    font-size: 36px;
    color: white;
    mix-blend-mode: hard-light;
    z-index: 9999999;
    text-shadow: 5px 5px 10px rgba(0,0,0,.2), -1px -1px 25px rgba(0,0,0,.1);
    letter-spacing: 2px;
  }
  #mountain{
    width: 100%;
    top: 50px;
    max-width: 978px;
  }
  #boat{
    display: inline-block;
    width: 100%;
    max-width: 176px;
    margin-top: 27%;
    margin-right: -28%;
  }
  #birds{
    display: inline-block;
    width: 100%;
    max-width: 304px;
    margin-top: 15%;
    margin-left: -30%;
  }
  #island{
    display: inline-block;
    width: 100%;
    max-width:1035px;
    margin-top: 15%;
  }
}
.text-center{
  text-align: center;
  width: 100%;
}

JS

Библиотека jquery

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

и parallax.js

https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js

скрипт

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