Parallax Practice

index.html

<div id="parallax-container">
  <div style="background-image: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/SkyBG.png);">
  </div>
  <div style="background-image: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds1.png);">
  </div>
  <div style="background-image: url(https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds2.png);">
  </div>
  <div style="background-image: url(https://www.superrb.com/frontend/img/parallax/mountains-foreground-layer-6.png);">
  </div>
  <div class="mountains" style="background-image: url(http://plasticdetox.me/static/media/bg6.8ab073ae.png)";>
  </div>
  <div style="background-image: url(http://www.firewatchgame.com/images/parallax/parallax8.png)";>
  </div>
</div>
  <div id="content">
  <h1>Parallax Effect</h1>
    <p>the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.</p>
</div>

parallax-practice.markdown

Parallax Practice

A Pen by Conner on CodePen.

License.

script.js

window.addEventListener('scroll', () => {
  let parent =  document.getElementById('parallax-container');
  let children = parent.getElementsByTagName('div');
  for(let i = 0; i < children.length; i++) {
    children[i].style.transform = 'translateY(-' + (window.pageYOffset * i / children.length) + 'px)';
  }
}, false)

style.css

@import url('https://fonts.googleapis.com/css?family=Markazi+Text|Raleway');


body {
  margin: 0;
  background: rgb(33,0,2);
}

#parallax-container {
  display: block;
  height: 95vmin;
}

#parallax-container div {
  position: fixed;
  top: 0;
  background-position: center top;
  background-size: cover;
  transform: translateY(0vmin);
  height: 95vmin;
  width: 100%;
}

#content {
  position: relative;
  background: rgb(33,0,2);
  color: #ffffff;
  padding: 30vmin;
}
#content h1 {
  font-size: 15vmin;
  text-align: center;
  font-family: 'Markazi Text', serif;
}

#content p {
  font-size: 3vmin;
  font-family: 'Raleway', sans-serif;
}