Pure HTML/CSS Slide on Scroll

Unlike the JavaScript library version, this very simple example uses only HTML and CSS to implement a sliding effect on scroll. NOTE: not compatible with Internet Explorer.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pure CSS Slide on Scroll Example</title>
	<style>
	body {
		padding: 0;
		margin: 0;
	}
	header {
		text-align: center;
		font-size: 40px;
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	.scroll {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		box-shadow: 0 0 10px black;
		background-color: dimgray;
		color: white;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		position: sticky; /* NOT COMPATIBLE WITH IE!!! */
		top: 0;
	}
	.scroll:nth-child(2) {
		background-image: url(https://picsum.photos/id/237/1920/1080);
	}
	.scroll:nth-child(3) {
		background-image: url(https://picsum.photos/id/718/1920/1080);
	}
	.scroll:nth-child(4) {
		background-image: url(https://picsum.photos/id/169/1920/1080);
	}
	.scroll:nth-child(5) {
		background-image: url(https://picsum.photos/id/1062/1920/1080);
	}
	</style>
</head>

<body>

	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>Scroll down!</div>
		</header>
	</div>
	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>Scroll down!</div>
		</header>
	</div>
	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>Scroll down!</div>
		</header>
	</div>
	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>Scroll down!</div>
		</header>
	</div>
	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>Scroll down!</div>
		</header>
	</div>
	<div class="scroll">
		<header>
			<h1>PURE CSS EXAMPLE</h1>
			<div>END!</div>
		</header>
	</div>

</body>
</html>

Coding Video

https://youtu.be/daC2WTlxnrQ