Параллакс из фоновых изображений

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

HTML

<section class="landing">
    <div class="shapes shapes4"></div>
    <div class="shapes shapes3"></div>
    <div class="shapes shapes2"></div>
    <div class="shapes shapes1"></div>
    <div class="layer"></div>
</section>

CSS

body {
  width: 100%;
  margin: 0;
}
.landing {
  overflow: hidden;
  position: relative;
  background: #174799 url('https://www.imageupload.co.uk/images/2018/01/24/bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
}

.landing .shapes.shapes1 {
    background: url('https://www.imageupload.co.uk/images/2018/01/24/shape1.png') no-repeat center;
}
.landing .shapes.shapes2 {
    background: url('https://www.imageupload.co.uk/images/2018/01/24/shape.png') no-repeat center;
}
.landing .shapes.shapes3 {
    background: url('https://www.imageupload.co.uk/images/2018/01/24/shape2.png') no-repeat center;
}
.landing .shapes.shapes4 {
    background: url('https://www.imageupload.co.uk/images/2018/01/24/shape3.png') no-repeat center;
}

.landing .shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.landing .shapes2 {
    padding-top: 300px;
}
.landing .shapes4 {
    z-index: 0;
}
.landing .layer {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);

JS

$('.landing').mousemove(function(e){
    var width = $(this).width() / 2;
    var height = $(this).height() / 2;
    var amountMovedX1 = ((width - e.pageX) * -1 / 16);
    var amountMovedY1 = ((height - e.pageY) * -1 / 16);

    var amountMovedX2 = ((width - e.pageX) / 40);
    var amountMovedY2 = ((height - e.pageY) / 30);

    var amountMovedX3 = ((width - e.pageX) / 20);
    var amountMovedY3 = ((height - e.pageY) / 20);

    var amountMovedX4 = ((width - e.pageX) * -1 / 10);
    var amountMovedY4 = ((height - e.pageY) * -1 / 20);

    $('.shapes1').css('marginLeft', amountMovedX1);
    $('.shapes1').css('marginTop', amountMovedY1);

    $('.shapes2').css('marginLeft', amountMovedX2);
    $('.shapes2').css('marginTop', amountMovedY2);

    $('.shapes3').css('marginLeft', amountMovedX3);
    $('.shapes3').css('marginTop', amountMovedY3);

    $('.shapes4').css('marginLeft', amountMovedX4);
    $('.shapes4').css('marginTop', amountMovedY4);
});