8.9 Snippet - Scroll

1. Waypoints

<!DOCTYPE html>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="assets/vendor/animate.css/animate.min.css">
    section {
      height: 500px;
      background-color: #f0f0f0;
      margin: 5px;
  <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>
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/waypoints/lib/jquery.waypoints.min.js"></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%' });

See the Pen waypoints by Ungmo Lee (@ungmo2) on CodePen.

Back to top