onScreen

A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport)

The plugin works something like this:

$('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
});

You can checkout the demos here. And you can download them here.

Options

container

string. Tells onScreen() to track elements inside a scrollable element.
default: window (without quotes)

direction

string. Tells the plugin to work in horizontal or vertical mode.
default: vertical

doIn

function. Is executed whenever the matched elements enter the viewport.
default: null

doOut

function. Is executed whenever the matched elements leave the viewport.
default: null

tolerance

integer. The doIn() method will be executed when the matched element is N pixels inside the viewport.

throttle

integer. Throttle delay. Throttles calculation callback, so it will executed no more than specified delay ms.
default: null

toggleClas

string. Tells the plugin to add a specified class when the elements enter the viewport and remove it when they leave.
default: null

lazyAttr

string. onScreen will look for this attribute on <img> tags and replace the src attribute with this one's.
default: null

lazyPlaceholder

string. Image to display while loading. This is applied through CSS as the background of the matched elements.
default: A base64 encoded gif file.

debug

boolean. Spams your console with information about the matched elements and the scroll container.
default: false.