How to create a bounce in and out on scroll effect using CSS ?
Last Updated :
25 Jul, 2024
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.
Similar Reads
How to create Shooting Star Animation Effect using CSS ? The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e
4 min read
How to create a bouncing bubble effect using CSS ? The bouncing bubble effect in CSS creates an animation where elements, typically circles or bubbles, move up and down, simulating a bouncing motion. Using properties like @keyframes, transform, and animation, this effect adds a playful, dynamic visual appeal to the webpage.ApproachContainer Setup: T
2 min read
How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpageâs background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java
2 min read
How to create Incoming Call Animation Effect using CSS ? In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off
2 min read
How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html
4 min read
How to Create a Custom Scrollbar using CSS? Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba
4 min read