Updated April 10, 2023
Introduction to jQuery scroll animation
The jQuery scroll animation is used to create a custom animation on the scroll. The jQuery animation() function, scroll() function and the scrollTop or scrollLeft CSS property can be used to perform the scroll animation. The jQuery scroll() function triggers and handles the scroll event. The jQuery the scrollTop, scrollLeft properties, and animation() function are built-in properties and functions in the jQuery. The scrollTop and scrollLeft properties are used to set or get the scrollbar position of a selected element. The scroll event is generated when the user moves the scrollbar of an element. For the scrollbar, we can use the CSS property as well. The animate() function is used to apply the animation on the selected set of CSS properties.
The syntax of the jQuery scroll animation –
The syntax of the jQuery animate() function with the scrollTop or scrollLeft CSS property –
$("selector").animate({ scrollTop : scrollPosition, scrollLeft : scrollPosition });The syntax of the jQuery scroll() function with the animate() handler function –
$("selector").scroll(function(){ $("selector").animate({ properties }, speed, callback );});Parameters –
- scrollTop – It specifies the animate property to set or get the vertical scrollbar position of the selected element.
- scrollPosition – It specifies the value to set or get vertical (or horizontal for the scrollLeft) scrollbar position of the selected element.
- scrollLeft – It specifies the animate property to set or get the horizontal scrollbar position of the selected element.
- properties – It specifies the CSS properties for animation.
- speed – It specifies the animation duration in milliseconds or “slow”, “fast”.
- callback – It specifies the function to be executed once the animation is completed.
Return value –
The animate function does not any value.
Working of the jQuery scroll animation
The JQuery scroll animation performs with the help of the animate() function scroll() function and scrollTop or scrollLeft property. Suppose we have an div scrollable box and we need to apply the animation effects on it when it is scroll. So we can use the scoll() function and animation function as “$(“div”).scroll(function(){ $(“div”).animate( { width : “60%”, fontSize : “2em”, borderWidth : “11px”} ); });”, which will show all the animate properties once we scroll the div element box.
Examples for the jQuery scroll animation
Here are the following examples mention below
Example #1
Example of jQuery scroll animation to the animate() function and the scrollTop property –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery scroll animation working </title>
<style>
.scroll {
background-color : gray;
height : 500px;
font-size : 100px;
}
</style>
</head>
<body>
<h3> This is an Example for scroll animation effect : </h3>
<p> Click on the button to scroll to the top of the page. </p>
<p class = "scroll"> Please keep on scrolling down until the button you can see... </p>
<button onclick = "scrollAnimated()"> Click here to scroll to the top. </button>
<script type = "text/javascript">
function scrollAnimated() {
$("html, body").animate({ scrollTop: "20" });
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the page is scrollable because of the P element as its size is very large. So when we scroll down the page and then we can see the button, if we click on the button its call to the function which scroll top the page by using the code as “$(“html, body”).animate({ scrollTop: “20” });”, the result of it we can see in the output.
Example #2
Example of jQuery scroll animation to with the scroll() function and the css() function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery scroll animation working </title>
<style>
#p1 {
width : 200px;
height : 200px;
border : 2px solid red;
overflow : scroll;
font-size : 30px;
}
</style>
</head>
<body>
<h3> This is an Example for scroll animation effect : </h3>
<h2> Scroll the box text to see the effect. </h2>
<p id = "p1"> Please keep on scrolling down as much you want... Please keep on scrolling down as much you want... </p>
<script>
$(document).ready( function(){
$( "#p1" ).scroll( function(){
$( "#p1" ).css( "color", "red" );
$( "#p1" ).css( "background", "yellow" );
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the box, the output is –
In the above code, the p text of scrollable box is created. Next the scroll() and css() functions are used to animate the scroll of p element box as “$( “#p1” ).scroll( function(){$( “#p1” ).css( “background”, “yellow” );});”, so if we scroll the p content box, then it’s background colour changes to yellow as we can see in the above output.
Example #3
Example of jQuery scroll animation with the scroll() function and the animate() function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery scroll animation working </title>
<style>
#p1{
width : 200px;
height : 200px;
border : 2px solid red;
overflow : scroll;
font-size : 30px;
}
</style>
</head>
<body>
<h3> This is an Example for scroll animation effect : </h3>
<h2> Scroll the box text to see the effect. </h2>
<p id = "p1"> Please keep on scrolling down as much you want... Please keep on scrolling down as much you want... </p>
<script>
$(document).ready( function(){
$( "#p1" ).scroll( function(){
$( "#p1" ).animate( { width : "60%",
opacity : 0.5,
marginLeft : "0.5in",
fontSize : "2em",
borderWidth : "11px"
}, 1500 );
});
});
</script>
</body>
</html>An output of the above code is –
Once we scroll the box, the output is –
In the above code, the p scrollable content box is created. Next the scroll() and animation() functions are used to animate the scroll of p element box as $(“#p1”).scroll(function(){$(“#p1”).animate( { width : “60%”, borderWidth : “11px” }, 1500 ); });”, where 1500 is the speed of animation in milliseconds. So, if we scroll the p content box, then it’s size and border changes as we can see in the above output.
Conclusion
The jQuery scroll animate can be performed with the help of scroll() function, animate function, css() function, and the scrollTop or ScrollLeft property. The scroll animate is used to create a custom animation on the scroll of the element.
Recommended Articles
This is a guide to jQuery scroll animation. Here we discuss the working of the JQuery scroll animation along with the examples and outputs. You may also have a look at the following articles to learn more –
