Демо

Представляю лучшее решение параллакс эффекта, которое удалось найти. Код немного оптимизирован. Никакого JavaScript, никаких плагинов, работает на всех фреймворках и любых типах устройств (с подержкой HTML5/CSS3).

1. HTML разметка

   <div class="parallax">
       <div class="parallax__group">
           <div class="parallax__content">
               <h3 class="parallax__head">Пример параллакс эффекта на чистом CSS3</h3>
           </div>
           <div id="parallax__background" class="parallax__layer">
               <div class="parallax__image parallax__image__01"><img src="images/blog/2018/parallax/img1.jpg" /></div>
           </div>
           <div id="parallax__layer__01" class="parallax__layer">
               <div class="parallax__image parallax__image__02"><img src="images/blog/2018/parallax/img2.png" /></div>
           </div>
           <div id="parallax__layer__02" class="parallax__layer">
               <div class="parallax__image parallax__image__03"><img src="images/blog/2018/parallax/img3.png" /></div>
           </div>
       </div>
   </div>

2. CSS код

   .parallax {
       height: 100%;     
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-perspective: 180px;
       perspective: 180px;
   }
   .parallax__group {
       position: relative;
       height: 500px;     
       -webkit-transform-style: preserve-3d;
       transform-style: preserve-3d;
   }
   .parallax__content {
       position: absolute;
       top: 100px;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 10;
       transform: translate3d(0px, 0px, 100px) scale(.5);
       text-align: center;
       width: 100%;
   }
   .parallax__head {
       color: #fff;
       background: #000c;
       padding: 20px;
       font-size: 40px;
   }
   .parallax__layer {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
   }
   .parallax__image{    
       position: absolute;    
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   .parallax__image__01 {
       left: 50%;
       top: 50%;
   }   
   .parallax__image__02 {
       left: 60%;
       top: 150%;
   }
   .parallax__image__03 {
       left: 50%;
       top: 50%;
   }
   #parallax__background{
       z-index: 2;  
       -webkit-transform: translateZ(-300px) scale(2);
       transform: translateZ(-300px) scale(2);    
   }
   #parallax__layer__01{
       z-index: 3;
       -webkit-transform: translateZ(0) scale(.7);
       transform: translateZ(0) scale(.7);    
   }
   #parallax__layer__02 {
       z-index: 1;  
       -webkit-transform: translateZ(60px) scale(.8);
       transform: translateZ(60px) scale(.8);    
   }

   В некоторых CSS фреймворках необходимо дополнительно прописать

   .parallax img{
       max-width: none;
   }

3. Скорректируйте значения translateZ(**) scale(**) под размеры изображений, составляющих ваши слои.