Open In App

Create a Reverse Scrolling Effect using HTML and CSS

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

HTML
<!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>
CSS
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:

mediaio_FPDqpOU3

Next Article

Similar Reads