How to use

Basic usage

The basic form $('element').onScreen(); will only toggle the onScreen class on the matched elements. This is optimal for CSS animations, like the demos section above.

You can set the tolerance parameter and allow the elements to enter the viewport certain amount of pixels before doing anything.

A lil' bit more complex...

onScreen() also has two methods called doIn() and, obviously, doOut() that will execute when the matched elements enter and leave the viewport. It's pretty straight forward. Here's a full example with all the parameters:

$('elements').onScreen({
   container: window,
   direction: 'vertical',
   doIn: function() {
     // Do something to the matched elements as they come in
   },
   doOut: function() {
     // Do something to the matched elements as they get off scren
   },
   tolerance: 0,
   throttle: 50,
   toggleClass: 'onScreen',
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg',
   debug: false
});

onScreen() can work as a lazy loader for your images, that way you can minimize unnecessary http requests of content that isn't even visible. To enable it, all you have to do is set the lazyAttr parameter and onScreen() will look for that attribute on img tags and then set its value as the src attribute once the image enters the viewport.