jacobdubail/onscreen

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

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({
   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,
   toggleClass: true,
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg'
});

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

Options

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.
default: 0

toggleClass

boolean. Tells the plugin to add the onScreen class when the elements enter the viewport and remove it when they leave.
default: true

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.