Create a Reverse Scrolling Effect using HTML and CSS

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:

Article Tags :

Web Technologies

Web Templates