nina.css

@import "bourbon";


$farColor: #ffe4c7;
$nearColor: darken(cyan,30%);
$layer: 7; //make sure it is +1 the ammount of layer divs in the html
$perspective: 1;

.bg {
  position:absolute;
  height:100%;
  width:100%;
  top:0px;
  z-index:0;
  background-color:$farColor;
}

.layer {
  position:fixed;
  top:0px;
  margin:auto;
  width:100%;
  z-index:100;
  min-height:400px;
  top: 0; left: 0; right: 0; bottom: 0;
  background-position: top center;
  background-repeat: no-repeat;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: #{$perspective + px};
}

.parallax-group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}




@for $i from 1 to $layer {
  .parallax-group div:nth-child(#{$i}) {
    
    //figure out best mixing math, this isn't true to the starting colors, doesnt scale that well
    $mixedColor: mix($nearColor, $farColor, $i*15); 
    $randOffset: random(300)+px;
    $zDepth: ($layer - $i)/0.5;
    
    background-color:$farColor;    
    margin-top:#{300*($i+1) + px};
    background-color:$mixedColor;
    transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});
 
    &:before {
      content:"";
      width:100%;
      height:200px;
      position:absolute;
      bottom:100%;
      left:0;
      background-image: linear-gradient(135deg, transparent 66%, $mixedColor 66.01%),
                        linear-gradient(45deg, $mixedColor 34%, transparent 34.01%);
      background-position: $randOffset 0px;
      background-size: 200px 100%;
      background-repeat:repeat-x;
    }
  }

} //loop over







///Demo specific styling



.content {
  position:relative;
  background-color:transparent;
  font-family:"Arial";
  letter-spacing:10px;
  text-transform:uppercase;
  line-height:40px;
  z-index:10;
  width:100%;
  font-size:15px;
  text-align:center;
  color:white;
  margin-top:1000px;
  $zDepth: (1)/0.5;
  transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});
}
 
.fill {
  height:80%; //?
}