How can I create a JavaScript function that adds the class "animated fadeInDown" to div id hover1 when I reach or scroll to it?
Also, when I scroll down or leave div id hover1, how do I change the class from "animated fadeInDown" to "animated fadeOutUp"?
I am utilizing animate.css for the CSS classes.
Here is an example (with animate.css and jQuery already included):
body {
height: 9999px;
}
.kotak {
height: 500px;
background-color: red;
color: white;
}content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content
<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
<div id="hover1" class="kotak"><br/> <br/> <br/> <br/><br/> <br/> <br/> <br/><br/> <br/> <br/> <br/><br/> <br/> <br/> <br/><br/> <br/> <br/> <br/><br/> <br/> <br/> <br/></div>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>