articles » current » css » slide-on-scroll

CSS: Slide on Scroll

HTML and CSS only!

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE