/onScreen

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

Primary LanguageJavaScriptMIT LicenseMIT

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
});

Download

Download the compressed (production) version.

Download the uncompressed (development) version.

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

Bower

onScreen is available as a bower package. Just run bower install onScreen and you're set.

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

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

####toggleClass: 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

####remove: string Detach the event listener. You have to use this on the container element onScreen is attached to. Eg: If onScreen is attached to the window (the default behavior) you should use $(window).onScreen('remove') and onScreen will be removed.