layered

by Glynne Turner

HTML

<div class="parallax bg1">
  <div class="object-wrapper speed-1">
    <div class="object object-1"></div>
  </div>
  <div class="object-wrapper speed-2">
    <div class="object object-2"></div>
  </div>
  <div class="object-wrapper speed-3">
    <div class="object object-3"></div>
  </div>
  <div class="object-wrapper speed-4">
    <div class="object object-4"></div>
  </div>
  <div class="object-wrapper speed-5">
    <div class="object object-5"></div>
  </div>
  <div class="object-wrapper speed-6">
    <div class="object object-6"></div>  
  </div> 
</div>

 <div style="height:200vh; background-color:pink">
   
  </div>

CSS

body,html{margin:0;padding:0;}

.parallax {
  perspective: 1px;
  height: 80vh;
  overflow-x: hidden;
  overflow-y: auto; 
  
}
/* Hide scrollbar for Chrome, Safari and Opera */
.parallax::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.parallax {
  -ms-overflow-style: none;
}

.object-wrapper { 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
  justify-content: center;
}

.speed-1 {
  transform: translateZ(-1px) scale(2);
}

.speed-2 {
  transform: translateZ(-2px) scale(3);
}

.speed-3 {
  transform: translateZ(-3px) scale(4);
}

.speed-4 {
  transform: translateZ(-4px) scale(5);
}

.speed-5 {
  transform: translateZ(-5px) scale(6);
}

.speed-6 {
  transform: translateZ(-6px) scale(7);
}

.object {
  margin-left: 250px;
  height: 100px;
  width: 300px;
}

.object-1 {
  margin-top: 150vh;
  background: red;
}

.object-2 {
  margin-top: 160vh;
  background: yellow;
}

.object-3 {
  margin-top: 170vh;
  background: blue;
}

.object-4 {
  margin-top: 180vh;
  background: green;
}

.object-5 {
  margin-top: 190vh;
  background: pink;
}

.object-6 {
  margin-top: 200vh;
  background: purple;
}

.page-content {
  height: 6000px;
  background-color:pink;
  position:relative;
}
.bg1{background-image: url("http://eskipaper.com/images/beautiful-night-landscape-wallpaper-1.jpg")}