Parallax Effect with HTML and CSS

This landing page with parallax effect requires HTML and CSS but no JavaScript to function.

This works thanks to the perspective: 1px;, transform-style: preserve-3d; and transform: translateZ(-1px) scale(2); code clips.

Warning, this CSS is not compatible with IE11, but the text is all readable and the screen is scrollable. The parallax effect is compatible with Firefox, Chrome and Safari.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Parallax</title>
	<style>
		*, *::before, *::after {
			box-sizing: border-box;
		}

		html {
			height: 100%;
			overflow: hidden;
		}

		body {
			margin: 0;
			padding: 0;
			perspective: 1px;
			height: 100%;
			overflow-y: scroll;
			overflow-x: hidden;
			font-family: sans-serif;
		}

		p {
			font-size: 2vh;
			text-shadow: 2px 2px rgba(0,0,0,0.33);
		}

		h1 {
			font-size: 10vh;
			text-shadow: 5px 5px rgba(0,0,0,0.33);
		}

		.slide {
			position: relative;
			padding: 0;
			height: 100vh;
			max-height: 100vh;
			width: 100vw;
			transform-style: preserve-3d;
			display: table;
		}

			.slide div {
				text-align: center;
				color: #fff;
				display: table-cell;
				vertical-align: middle;
				padding: 0 5%;
			}

			.slide::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				transform: translateZ(-1px) scale(2);
			}

			.slide,
			.slide::before {
				background-size: cover;
				background-position: center center;
			}

		.one::before {
			background-image: url(https://picsum.photos/id/1010/3840/2160);
		}

		.two {
			background-image: url(https://picsum.photos/id/1005/3840/2160);
			z-index: 1;
		}

		.three::before {
			background-image: url(https://picsum.photos/id/1011/3840/2160);
		}

		.four {
			background-image: url(https://picsum.photos/id/1015/3840/2160);
		}

		#footer {
			position: relative;
			min-height: 100vh;
			width: 100vw;
			padding: 0;
			display: table;
			background-color: #000;
			color: #eee;
		}

			#footer div {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				padding: 0 5%;
			}
	</style>
</head>
<body>

	<div class="slide one">
		<div>
			<h1>Parallax Effect</h1>
		</div>
	</div>
	<div class="slide two">
		<div>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
			<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
			<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
		</div>
	</div>
	<div class="slide three">
		<div>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
			<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
			<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
		</div>
	</div>
	<div class="slide four">
		<div>
			<h1>Contact Us</h1>
		</div>
	</div>

	<div id="footer">
		<div>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
			<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
			<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
		</div>
	</div>

</body>
</html>

Coding Video

https://youtu.be/fsoHEm2rgXE