<div class="parallax-wrap">
  <span value="-15"></span>
  <span value="5"></span>
  <span value="30"></span>
  <span value="-5"></span>
  <span value="15"></span>
  <h2>Parallax effect</h2>
</div>

// Variables
$size-ball: 20px;

// Style
body {
  margin: 0;
  height: 100vh;
  background-color: #bd1060;
  overflow:hidden;  
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.parallax-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parallax-wrap h2 {
  position: relative;
  font-size: 100px;
  color: white;
  z-index: 2;
  text-align: center;
}

@mixin ball($top: 50%, $left: 50%, $color: yellow, $zindex: 3){
  top: $top;
  left: $left;
  background: $color;
  z-index: $zindex;
}

.parallax-wrap span {
  position: absolute;
  height: $size-ball;
  width: $size-ball;
  border-radius: 100%;
  &:nth-child(1){
    @include ball(70%, 70%, blue);
  }
  &:nth-child(2){
    @include ball(60%, 80%, yellow);
  }
  &:nth-child(3){
    @include ball(40%, 60%, green);
  }
  &:nth-child(4){
    @include ball(70%, 40%, red);
  }
  &:nth-child(5){
    @include ball(40%, 30%, purple);
  }
}

document.addEventListener("mousemove", parallax);
function parallax(event) {
  this.querySelectorAll(".parallax-wrap span").forEach((shift) => {
    const position = shift.getAttribute("value");
    const x = (window.innerWidth - event.pageX * position) / 90;
    const y = (window.innerHeight - event.pageY * position) / 90;

    shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
}