Smooth Multi-layer Parallax Scroll Effect In Vanilla JavaScript

Preview:

Description:

A smooth, mobile-compatible parallax scroll effect built in with vanilla JavaScript and CSS3 2D transforms.

How to use it:

Create several layers on which you want to apply the parallax scroll effect.

<header class="hero">
  <div class="back-el"></div>
  <div class="main-el"></div>
  <div class="fore-el"></div>
</header>

Add background images to the layers.

.hero {
  height: 600px;
  position: relative;
  background: url(bg.jpg);
  background-size: contain;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden;
}

.main-el {
  height: 100px;
  width: 100%;
  background-image: url(main.jpg);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.fore-el {
  background-color: transparantize(pink, 0.5);
  background-image: url(fore.png);
  height: 733px;
  width: 960px;
  background-repeat: no-repeat;
  background-position: right bottom;
  position: absolute;
  left: 50%;
  margin-left: -480px;
  top: 380px;
}

.back-el {
  width: 960px;
  height: 298px;
  background-image: url(back.png);
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  left: 50%;;
  margin-left: -480px;
}

The JavaScript to enable the parallax scroll effect using CSS3 2D transforms.

window.addEventListener('scroll', scrollFunc);

function scrollFunc() {
  var windowScroll = this.scrollY; 

  var $logo = document.getElementsByClassName('main')[0];
  $logo.style.transform = 'translateY(' + windowScroll/2 + '%)';

  var $backBird = document.getElementsByClassName('back-el')[0];
  $backBird.style.transform = 'translateY(' + windowScroll/4 + '%)';

  var $foreBird = document.getElementsByClassName('fore-el')[0];
  $foreBird.style.transform = 'translateY(-' + windowScroll/100 + '%)';

}