@import "compass/css3";

*{
  box-sizing: border-box;
}

html,
body{
  background-color: #FEDCC8;
}

.parallax {
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  img{
    display: block;
    position: absolute;
    bottom: 0;
  }
}

.parallax__cover{
  background: #2D112B;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
}

$parallax__layers: 6;

@for $i from 0 through $parallax__layers {
  $x: ($parallax__layers - $i) / 2;
  .parallax__layer__#{$i}{
     transform: translateZ(-100 * $x#{px}) scale($x + 1);
  }
}
<div class="parallax">
    <div class="parallax__layer parallax__layer__0">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header6.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__1">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header5.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__2">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header4.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__3">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header3.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__4">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header2.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__5">
        <img src="https://www.keepersofeniv.com/files/frontpage/Header1.png?raw=true" />
    </div>
    <div class="parallax__cover"></div>
</div>