scrollClass.js


An easy-to-use jQuery plugin for adding classes to elements when they are scrolled into view.

Animations

Add CSS3 animations to elements when they are revealed. Code Example

<img src="img/candy.png" data-scroll-class="fadeInLeft" class="animated">
<img src="img/candy.png" data-scroll-class="fadeInUp" class="animated">
<img src="img/candy.png" data-scroll-class="fadeInRight" class="animated">

Callback

A custom callback function can be executed after an element enters the viewport.
Below is an example showing how to lazy load images. Code Example

<div class="load-img" data-scroll-class="zoomIn" data-img="img/image1.jpg"></div>
<div class="load-img" data-scroll-class="zoomIn" data-img="img/image2.jpg"></div>
<div class="load-img" data-scroll-class="zoomIn" data-img="img/image3.jpg"></div>
callback: function () {
   var selector = $(this);
   var img = $("<img />").attr('src', $(this).data("img")).one('load', function() {
      selector.append(img);
   });
}