1. Waypoints
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Waypoints</title>
<link rel="stylesheet" href="assets/vendor/animate.css/animate.min.css">
<style>
section {
height: 500px;
background-color: #f0f0f0;
margin: 5px;
}
</style>
</head>
<body>
<section id="header">↓↓↓</section>
<section id="animation">
<img src="img/carl.jpg">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</section>
</body>
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/waypoints/lib/jquery.waypoints.min.js"></script>
<script>
$(function() {
$('#animation').waypoint(function(direction) {
if(direction == 'down') {
$('#animation img').addClass('animated shake');
$('#animation h1').addClass('animated bounceInRight');
} else {
$('#animation img').removeClass('animated shake');
$('#animation h1').removeClass('animated bounceInRight');
}
}, { offset: '50%' });
});
</script>
</html>
See the Pen waypoints by Ungmo Lee (@ungmo2) on CodePen.