<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; }
	}
}
View Compiled
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();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.