<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>
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);
$('.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);
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js