Create a Reverse Scrolling Effect using HTML and CSS
Last Updated :
24 Apr, 2025
Improve
Creating an attractive UI with a reverse scroll effect can be an engaging design. The Reverse Scrolling effect facilitates a unique and visually interactive experience for users, which breaks the conventional top-down scrolling system to which the user is accustomed. In this article, we'll create a basic reverse-scrolling effect on the webpage with the help of HTML & CSS only. The following approach will be implemented to design the basic structure for the Reverse scroll.
Approach
- Create a div with a container for content classes that will hold the content for reverse scroll.
- Define the styles for container, and content in order to create the reverse-scroll effect. Set the overflow property to hidden, in order to hide the content outside the container.
- Define the linear keyframe animation named reverseScroll with a duration of 20 seconds in an infinite loop.
- To animate the reverse scrolling, define the vertical translation to animate the content. Here, the content will have no vertical translation at '0%', & then the content will translated vertically by '-100%', in order to make the reverse-scroll effect at '100%'.
Example: This example illustrates the basic implementation of creating the Reverse scroll Effect using HTML & CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>The Reverse Scroll</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content">
<h1>
Welcome to GeeksforGeeks
</h1>
<p>
GeeksforGeeks is a E-Learning Platform.
</p>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #008000;
overflow: hidden;
font-family: Arial, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.content {
background-color: #C0C0C0;
border-radius: 10px;
padding: 20px;
text-align: center;
animation: reverseScroll 10s linear infinite;
}
@keyframes reverseScroll {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
Output:
