<div class="parent">
  <div class="parallex">
  <h1>deserunt dolores molestiae 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae perferendis deserunt dolores molestiae hic dolorum maxime numquam, ad rerum quas optio quis ut</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png" width="100"/>
  </div>
</div>

<div class="parent">
  <div>
  <h1>deserunt dolores molestiae 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae perferendis deserunt dolores molestiae hic dolorum maxime numquam, ad rerum quas optio quis ut</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png" width="100"/>
  </div>
</div>

<div class="parent">
  <div>
  <h1>deserunt dolores molestiae 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae perferendis deserunt dolores molestiae hic dolorum maxime numquam, ad rerum quas optio quis ut</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png" width="100"/>
  </div>
</div>

<div class="parent">
  <div>
  <h1>deserunt dolores molestiae 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae perferendis deserunt dolores molestiae hic dolorum maxime numquam, ad rerum quas optio quis ut</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png" width="100"/>
  </div>
</div>

<div class="parent">
  <div>
  <h1>deserunt dolores molestiae 5</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae perferendis deserunt dolores molestiae hic dolorum maxime numquam, ad rerum quas optio quis ut</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Avatar_girl_face.png" width="100"/>
  </div>
</div>
* {
  padding: 0;
  margin: 0
}
.parent:first-of-type {
  background: #ffffff url("http://s8.favim.com/orig/140403/art-flower-flowers-grunge-Favim.com-1605689.jpg") no-repeat center center fixed;
  background-size: cover;
}
.parent:nth-of-type(2) {
  background: #ffffff url("http://s9.favim.com/orig/130908/beauty-flower-flowers-photo-Favim.com-906054.jpg") no-repeat center center fixed;
  background-size: cover;
}
.parent:nth-of-type(3) {
  background: #ffffff url("http://s12.favim.com/orig/160220/flowers-grunge-hipster-photography-Favim.com-4023702.jpg") no-repeat center center fixed;
  background-size: cover;
}
.parent:nth-of-type(4) {
  background: #ffffff url("http://data.whicdn.com/images/59213807/original.png") no-repeat center center fixed;
  background-size: cover;
}
.parent:last-of-type {
  background: #ffffff url("http://s3.favim.com/orig/47/beautiful-cute-flowers-rain-red-Favim.com-436699.jpg") no-repeat center center fixed;
  background-size: cover;
}
.parent {
  width: 100%;
  height: 150vh;
  color: #fff;
  text-shadow: 0 0 5px #000;
  font-family: tahoma;
  text-align: center;
  line-height: 180%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}
.parent p {
  padding: 25px
}
/*global $, jQuery, console, alert, prompt */
$(function() {
  "use strict";
  // All Variable ==========================================================================
  var parallex = $(".parent > .parallex");
  // Scroll ================================================================================

  $(window).on('scroll', function() {
    parallex.css({
      "transform": "translate(0, " + $(window).scrollTop() + "px)"
    });
    if ($('.parent > div').offset.top() >= $(window).scrollTop()) {
      parallex = $(".parent > .parallex, .parent > div");
    }
  });

});

// https://codepen.io/anon/pen/XRYrPz?editors=0110

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js