Πολλαπλά paralax σαν συμπληρωματικές εικόνες

Ένα από τα ποιο ωραία εφέ που βρήκαμε με Parallax το οποίο δημιουργεί την αίσθηση της αλληλοεπικάλυψης εικόνων.

Το αποτέλεσμα μπορείτε να το δείτε εδώ

http://codepen.io/avasil/full/LNgOBL/

Κώδικας HTML

<div class="parallax">
  <div class="bg__foo"> </div>
  <div class="bg__bar clip-svg3"> </div>
  <div class="bg__baz clip-svg3"> </div>
</div>

Κώδικας CSS

.parallax .bg__foo, .parallax .bg__bazz {
    height: 100vh;
   background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    position: relative;
    text-indent: -9999px;
}
.parallax .bg__foo {
    background-image: url(../../../images/site/first.jpg);
}
.parallax .bg__bar {
    background-image: url(../../../images/site/second.jpg);
   background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    height: 100vh;
    position: relative;
    text-indent: -9999px;
}

.parallax .bg__baz {  
  background-image: url(../../../images/site/last.jpg);
   background-attachment: fixed;
   background-position: center top;
   background-size: cover;
   height: 100vh;
   position: relative;
   text-indent: -9999px;
}