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.