WOW.js issue #46 sample

by Uğur Erkan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="box">
  <h1 class="wow slideInLeft">Hello</h1>
  <h1 class="wow slideInRight">World</h1>
  <h2>🤗 🌎 </h2>
</div>
<div class="doge wow bounceIn"></div>

<!-- First load wow.js and other libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy -->
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>

<!-- Modify after -->
<script>
  // Repeat demo content
  var $body = $('body');
  var $box = $('.box');
  for (var i = 0; i < 20; i++) {
    $box.clone().appendTo($body);
  }

  // Helper function for add element box list in WOW
  WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
  };

  // Init WOW.js and get instance
  var wow = new WOW();
  wow.init();

  // Attach scrollSpy to .wow elements for detect view exit events,
  // then reset elements and add again for animation
  $('.wow').on('scrollSpy:exit', function() {
    $(this).css({
      'visibility': 'hidden',
      'animation-name': 'none'
    }).removeClass('animated');
    wow.addBox(this);
  }).scrollSpy();

</script>

CSS

.box {
  display: block;
  width: 200px;
  background: rgba(255, 255, 255, 0.7);
  color: #eb3980;
  font-family: "Comic Sans MS", "Comic Sans";
  border: 3px dashed pink;
  margin: 30px auto;
  text-align: center;
}

.doge {
  display: block;
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}

body {
  background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}