<section>
  <div>▲</div>
  <div>△</div>
  <div>▲</div>
  <div>△</div>
  <div>▲</div>
  <div>△</div>
</section>

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  height: 100%; width: 100%;
}

body {
  margin: 0; padding: 0;
  background: #000;
}

section {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 15px;
  transition: transform 0.25s;
  will-change: transform;
  
  div {
    width: 100%;
    height: 400px;
    background: #FFF;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6vw;
    
    &:last-child { margin-bottom: 0; }
  }
}

const section = document.querySelector('section');

let currentPos = window.pageYOffset;

const update = () => {
  const newPos = window.pageYOffset;
  const diff = newPos - currentPos;
  const speed = diff * 0.35;
  
  section.style.transform = `skewY(${ speed }deg)`;
  
  currentPos = newPos;
  
  requestAnimationFrame(update);
}

update();