Inthis article, I will show you page, scroll down with fading effect. When theuser scrolls down from the top position to the bottom of the browser window. I willshow the page to fade and appear using jQuery animate. It will happen for the firsttime, when user load the page.
HTML Code: cssanimation on scroll
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
/* Everytime the window is scrolled ... */
$(window).scroll(function () {
/*Check the location of each desired element */
$('.hideDiv').each(function (i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window =$(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window */
if (bottom_of_window >bottom_of_object) {
$(this).animate({ 'opacity': '1' }, 500);
}
});
});
});
</script>
<style type="text/css">
#container Div {
margin: 50px;
padding: 50px;
background-color: #1599f1;
}
.hideDiv {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<div>Demo div</div>
<div>Demo div</div>
<div>Demo div</div>
<div>Demo div</div>
<div>Demo div</div>
<div>Demo div</div>
<div class="hideDiv">Fade In effect</div>
<div class="hideDiv">Fade In effect</div>
<div class="hideDiv">Fade In effect</div>
<div class="hideDiv">Fade In effect</div>
<div class="hideDiv">Fade In effect</div>
</div>
</body>
</html>
We have created a CSS called “hideDiv” there we have defined CSSproperty, set opacity to 0. When the user scroll down, Using jQuery animateproperty changing the opacity to 1 with speed of 500 milliseconds.
Post your comments / questions
Recent Article
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
- How to enable Search Feature in Django admin?
Related Article