<body>
  <div class="parallax area-1">area-1</div>
  <div class="parallax area-2">area-2</div>
  <div class="parallax area-3">area-3</div>
  <div class="parallax area-4">area-4</div>
  <div class="parallax area-5">area-5</div>
</body>
/* リセットCSS */
* , ::before , ::after {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* ________________ */
.parallax {
	align-items: center;
	display: flex;
	font-size: 3em;
	height: 100vh;
	justify-content: center;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
  	-webkit-filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7));
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7));
}

.area-1 {
	background-color: #e0e4eb;
	z-index: 100;
}

.area-2 {
	background-color: #aab5ca;
	z-index: 200;
}

.area-3 {
	background-color: #7383a1;
	z-index: 300;
}

.area-4 {
	background-color: #354d7b;
	z-index: 400;
}

.area-5 {
	background-color: #111934;
	color: #e5e5e5;
	z-index: 500;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.