Landscape parallax using only CSS

parallax.scss

// edit these
$farColor: #ffe4c7;
$nearColor: #2f4645;
$layer: 7; // make sure it is +1 the number of layered divs in the HTML
$perspective: 1;

.bg {
  background-color: $farColor;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.layer {
  background-position: top center;
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  margin: auto;
  min-height: 400px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}
.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: #{$perspective + px};
}
.parallax-group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
}
.content {
  background-color: transparent;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: 10px;
  line-height: 40px;
  margin-top: 1000px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  width: 100%;
  $zDepth: (1)/0.5;
  transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});
  z-index: 10;
}
@for $i from 1 to $layer {
  .parallax-group div:nth-child(#{$i}) {
    $mixedColor: mix($nearColor, $farColor, $i*15); // figure out best mixing math, this isn't true to starting colors
    $randOffset: random(300)+px;
    // get opposing angles
    background-color: $farColor;    
    margin-top: #{300*($i+1) + px};
    background-color: $mixedColor;
    $zDepth: ($layer - $i)/0.5;
    transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});

    &:before {
      background-image: linear-gradient(135deg, transparent 66%, $mixedColor 66.01%),
        linear-gradient(45deg, $mixedColor 34%, transparent 34.01%);
      background-position: $randOffset 0;
      background-repeat: repeat-x;
      background-size: 200px 100%;
      content: "";
      width: 100%;
      height: 200px;
      position: absolute;
      bottom: 100%;
      left: 0;
    }
  }
} //loop over
.fill {
  height: 80%;
}

scroll.htm

<div class="bg"></div>
<div class="parallax">
  <div class="parallax-group">
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer fill"></div>
  </div>
  <div class="content">
    <h1>Parallax Scrolling</h1>
    <p>Using only CSS</p>
  </div>
</div>