<!-- .parallax*9>img[src="http://unsplash.it/400/400?image=34$"]+span.counter-parallax+.parallax__inner>h2{Awesome things}+p{with sub titles} -->
<span class="counter">0</span>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=341" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=342" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=343" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=344" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=345" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=346" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=347" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=348" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>
<div class="parallax">
  <img src="http://unsplash.it/400/400?image=349" alt="" />
  <span class="counter-parallax"></span>
  <div class="parallax__inner">
    <h2>Awesome things</h2>
    <p>with sub titles</p>
  </div>
</div>

.parallax {
  position: relative;
  overflow: hidden;
  background: #344;
}
.parallax img {
  position: absolute;
  min-width: 120%;
  margin-left: -60%;
  left: 50%;
  min-height: 120%;
  margin-top: -60%;
  top: 50%;
  opacity: .7;
}
.parallax:nth-child(2) img {
  transform: translateY(-10px);
}
.parallax__inner {
  position: relative;
  text-align: center;
  padding: 150px 10px;
}
h2, p, span {
  color: #fff;
  margin: 0;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.counter-parallax,
.counter {
  font-size: 46px;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 9;
}
.counter-parallax {
  font-size: 26px;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 9;
}

$(document).on( 'scroll', function(){
  var counter = $(document).scrollTop();
  var translate = Math.floor(counter / 5);
  $('.counter').text(translate);
  
  $('img').css('transform', 'translateY(-' + translate + 'px)');
  
});