Open In App

How to create a bounce in and out on scroll effect using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Creating a bounce in and out on the scroll effect can add an exciting and engaging touch to your web design. This effect creates a bouncing animation when the user scrolls down the page, and then bounces back when the user scrolls up. In this article, we will discuss the syntax and approaches to create this effect, followed by at least two examples and output images.

Approach 1: Using CSS Animations: This approach uses keyframe animations to create the bouncing effect. We can define the keyframe animation as shown in the syntax above, and then apply it to an element using the animation property. We can also control the duration and timing of the animation using CSS properties such as animation-duration and animation-timing-function.

Syntax:

.bounce {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

 

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bounce on Scroll</title>
    <style type="text/css">
        @keyframes bounce {
            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }
  
            40% {
                transform: translateY(-30px);
            }
  
            60% {
                transform: translateY(-15px);
            }
        }
  
        .scroll-bounce {
            animation: bounce 2s infinite;
        }
  
        .container {
            height: 2000px;
            background-color: #f2f2f2;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="scroll-bounce">
            <h1 style="color:green">
              GeeksforGeeks
              </h1>
            Bounce on Scroll
        </div>
    </div>
</body>
</html>


Output:

 

In this example, we define a keyframe animation called “bounce” that creates the bouncing effect. We then apply this animation to an element with the class “scroll-bounce”. When the user scrolls down, the element will bounce up and down continuously.

Approach 2: Using JavaScript: This approach involves using JavaScript to listen for scroll events and apply a class to the element to trigger the bouncing animation. We can define the bouncing animation using CSS, and then add a class to the element when the user scrolls down, and remove the class when the user scrolls up. We can use the window.pageYOffset property to detect the scroll position, and the classList.add() and classList.remove() methods to add and remove the class from the element.

Syntax:

window.addEventListener("scroll", function () {
    var box = document.getElementById("box");
    var position = box.getBoundingClientRect();
    if (position.top < window.innerHeight && 
    position.bottom >= 0) {
        box.classList.add("bounce");
    } else {
        box.classList.remove("bounce");
    }
});

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bounce on Scroll</title>
    <style>
        .box {
            width: 210px;
            height: 40px;
            background-color: #3e3c3c;
            position: relative;
            animation: bounce 1s ease-in-out;
        }
  
        @keyframes bounce {
            0%,
            100% {
                transform: translateY(0);
            }
  
            50% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
  
<body>
    <div class="box">
        <h1 style="color:green">
          GeeksforGeeks
          </h1>
    </div>
  
    <button onclick="refreshPage()">
      Refresh Page
      </button>
    <script>
        function refreshPage() {
            location.reload();
        }
    </script>
  
    <script>
        window.addEventListener('scroll', function () {
            var box = document.querySelector('.box');
            var position = box.getBoundingClientRect();
  
            if (position.top < window.innerHeight && 
            position.bottom >= 0) {
                box.style.animationPlayState = 'running';
            } else {
                box.style.animationPlayState = 'paused';
            }
        });
    </script>
</body>
</html>


Output:

 

In this example, we define a CSS class called “box” that creates a red box with the bounce animation applied to it. We then use JavaScript to listen for scroll events and check whether the box is in view using getBoundingClientRect(). If it is in view, we set the animationPlayState property of the box to “running”, which starts the animation. If it is out of view, we set the animationPlayState property to “paused”, which stops the animation.



Last Updated : 22 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads