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.
string. Tells the plugin to work in horizontal or vertical mode.
default: vertical
function. Is executed whenever the matched elements enter the viewport.
default: null
function. Is executed whenever the matched elements leave the viewport.
default: null
integer. The doIn() method will be executed when the matched element is N pixels inside the viewport.
default: 0
boolean. Tells the plugin to add the onScreen class when the elements enter the viewport and remove it when they leave.
default: true
string. onScreen will look for this attribute on <img> tags and replace the src attribute with this one's.
default: null
string. Image to display while loading. This is applied through CSS as the background of the matched elements.
default: A base64 encoded gif file.