jQuery Plugin To Animate Elements On View While Scrolling - lazzy

lazzy is a simple tiny jQuery plugin that automatically adds a specific CSS class to any elements when they're about to come into view. A little similar to the lazy load effect. You can add your own CSS3 powered animations to the html elements when the user scrolls up or down.

How to use it:

1. Load the latest version of jQuery (Slim build) and jQuery lazzy plugin in the html page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="src/lazzy.js"></script>

2. Just call the lazzy function on the html elements and the plugin will do the rest.

$('.el').lazzy();

3. By default,the plugin will adds the CSS class 'is-show' to the elements when they come into view. You can animate them whatever you like in the CSS like this:

.photo.is-show {
  opacity: 1;
  transform: rotate(0deg)scale(1)translateY(0);
}

5. All configuration options.

$('.el').lazzy({

  // delay time in ms
  delay: 200,

  // default CSS class
  className: "is-show",

  // callback
  afterFinish: null,

  // animate the elements on scroll
  onScroll: false,

  // trigger offset in pixels
  triggerOffset: 0

});

---

This awesome jQuery plugin is developed by eldelentes. For more Advanced Usages, please check the demo page or visit the official website.