8.10 Snippet - Scroll

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">&#8595;&#8595;&#8595;</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.

Back to top
Close