Как сверстать параллакс на заднем плане, с условием, что кристаллы на разных слоях?

var sceneF = document.getElementById('scene-forward'); 
var parallaxInstance = new Parallax(sceneF); 
 
var sceneB = document.getElementById('scene-backward'); 
var parallaxInstance = new Parallax(sceneB);

html, 
body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
body { 
  font-family: sans-serif; 
} 
 
.section { 
  height: 100%; 
  width: 100%; 
  overflow: hidden;   
  position: relative; 
  background: rgba(53,93,115,1); 
  background: linear-gradient(to top right, rgba(53,93,115,1) 0%, rgba(32,59,73,1) 100%); 
} 
 
.section{ 
  height: 100%; 
  width: 100%; 
  padding: 2rem 4rem; 
  display: flex; 
  flex-flow: column nowrap; 
  align-items: center; 
  text-align: center; 
  justify-content: center; 
  z-index: 10; 
} 
 
.section-title { 
  text-transform: uppercase; 
  font-weight: light; 
  color: #fff; 
  margin-bottom: 4rem; 
  z-index: 10; 
} 
 
.section-body { 
  max-width: 30rem; 
  color: #fff; 
  font-size: .875rem; 
  line-height: 1.25rem;  
  position: relative; 
  z-index: 10; 
} 
 
.scene, 
.layer { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    top: 0; 
    left: 0; 
} 
 
#scene-forward { 
  z-index: 5; 
} 
 
#scene-backward { 
  z-index: 20; 
} 
 
.layer svg { 
  position: absolute; 
} 
 
#pin-1 { 
  transform: scale(.5); 
  left: 5%; 
  bottom: 30%; 
} 
 
#pin-2 { 
  transform: scale(.45) rotate(20deg); 
  right: 10%; 
  bottom: 30%; 
} 
 
#pin-3 {   
  transform: scale(.15) rotate(45deg); 
  right: -10%; 
  bottom: -40%; 
} 
 
#pin-4 { 
  transform: scale(.2) rotate(60deg); 
  right: 0%; 
  bottom:10%; 
  filter: blur(10px); 
} 
 
#pin-5 { 
  transform: scale(.5) rotate(10deg); 
  left: 20%; 
  bottom:10%; 
  filter: blur(4px); 
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> 
   
   
  <div class="section"> 
    <h2 class="section-title">Три основных требования</h2> 
 
    <div class="section-body"> 
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, ullam molestiae maxime! Deserunt similique at iure iste odit dolore rem. 
      </p> 
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, fugiat! 
      </p> 
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ratione ducimus dolorum et quisquam impedit temporibus reiciendis aut delectus! Autem rem, doloremque reprehenderit tempore voluptatem natus asperiores delectus vel aliquam. 
      </p> 
    </div> 
     
     
     
    <div id="scene-forward" class="scene"> 
      <div data-depth="0.30" class="layer"> 
        <svg id="pin-1" xmlns:xlink="http://www.w3.org/1999/xlink" width="185.5" height="198.2">         
          <path style="fill:#3d6b84; stroke:#213c4b;" d="m 0.6,127.9 146.3,7 12.3,-134.3 z"/>         
          <path style="fill:#213c4b; stroke:#213c4b;" d="m 146.9,135 38,62.6 -25.7,-197 z"/> 
          <path style="fill:#3d6b84; stroke:#3d6b84;" d="m 0.6,127.9 184.3,69.7 -38,-62.6 z"/> 
        </svg> 
      </div> 
       
      <div data-depth="0.2" class="layer"> 
        <svg id="pin-2" xmlns:xlink="http://www.w3.org/1999/xlink" width="185.5" height="198.2">         
          <path style="fill:#42738d; stroke:#42738d;" d="m 0.6,127.9 146.3,7 12.3,-134.3 z"/>         
          <path style="fill:#325a6f; stroke:#325a6f;" d="m 146.9,135 38,62.6 -25.7,-197 z"/> 
          <path style="fill:#30566a; stroke:#30566a;" d="m 0.6,127.9 184.3,69.7 -38,-62.6 z"/> 
        </svg> 
      </div> 
       
      <div data-depth="0.1" class="layer"> 
        <svg id="pin-4" xmlns:svg="http://www.w3.org/2000/svg"width="840.28003" height="831.63"> 
          <g transform="translate(15.867334,-52.584961)" id="layer1"> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M -7.8670514,382.07993 L 312.55097,876.19257 L 387.19552,410.6131 L -7.8670514,382.07993 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.41241,579.50922 L 312.52667,876.21687 L 387.19552,410.6131 L 816.41241,579.50922 z "/> 
            <path style="fill:#30566a; stroke:#30566a;" d="M -7.8670514,382.07993 L 527.24183,60.583059 L 387.19552,410.6131 L -7.8670514,382.07993 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.37325,579.50922 L 527.24183,60.583059 L 387.19552,410.6131 L 816.37325,579.50922 z "/> 
            <path style="fill:#3e6a83; stroke:#3e6a83;" d="M -7.8670514,382.07993 L 527.24183,60.583059 L 458.19552,594.6131 L -7.8670514,382.07993 z"/> 
            <path style="fill:#42738d; stroke:#42738d;" d="M -7.8670514,382.07993 L 312.55097,876.19257 L 458.19552,594.6131 L -7.8670514,382.07993 z"/> 
            <path style="fill:#2f566a; stroke:#2f566a;" d="M 816.41241,579.50922 L 312.52667,876.21687 L 458.19552,594.6131 L 816.41241,579.50922 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.37325,579.50922 L 527.24183,60.583059 L 458.19552,594.6131 L 816.37325,579.50922 z "/> 
          </g> 
        </svg> 
      </div> 
       
      <div data-depth="0.15" class="layer"> 
        <svg id="pin-5" xmlns:xlink="http://www.w3.org/1999/xlink" width="185.5" height="198.2">         
          <path style="fill:#42738d; stroke:#42738d;" d="m 0.6,127.9 146.3,7 12.3,-134.3 z"/>         
          <path style="fill:#325a6f; stroke:#325a6f;" d="m 146.9,135 38,62.6 -25.7,-197 z"/> 
          <path style="fill:#30566a; stroke:#30566a;" d="m 0.6,127.9 184.3,69.7 -38,-62.6 z"/> 
        </svg> 
      </div> 
    </div> 
     
    <div id="scene-backward" class="scene">       
      <div data-depth="0.8" class="layer"> 
        <svg id="pin-3" xmlns:svg="http://www.w3.org/2000/svg"width="840.28003" height="831.63"> 
          <g transform="translate(15.867334,-52.584961)" id="layer1"> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M -7.8670514,382.07993 L 312.55097,876.19257 L 387.19552,410.6131 L -7.8670514,382.07993 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.41241,579.50922 L 312.52667,876.21687 L 387.19552,410.6131 L 816.41241,579.50922 z "/> 
            <path style="fill:#30566a; stroke:#30566a;" d="M -7.8670514,382.07993 L 527.24183,60.583059 L 387.19552,410.6131 L -7.8670514,382.07993 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.37325,579.50922 L 527.24183,60.583059 L 387.19552,410.6131 L 816.37325,579.50922 z "/> 
            <path style="fill:#3e6a83; stroke:#3e6a83;" d="M -7.8670514,382.07993 L 527.24183,60.583059 L 458.19552,594.6131 L -7.8670514,382.07993 z"/> 
            <path style="fill:#42738d; stroke:#42738d;" d="M -7.8670514,382.07993 L 312.55097,876.19257 L 458.19552,594.6131 L -7.8670514,382.07993 z"/> 
            <path style="fill:#2f566a; stroke:#2f566a;" d="M 816.41241,579.50922 L 312.52667,876.21687 L 458.19552,594.6131 L 816.41241,579.50922 z "/> 
            <path style="fill:#325a6f; stroke:#325a6f;" d="M 816.37325,579.50922 L 527.24183,60.583059 L 458.19552,594.6131 L 816.37325,579.50922 z "/> 
          </g> 
        </svg> 
      </div> 
    </div> 
  </div>