Fork me


A jQuery plugin that does stuff to elements when they enter or leave the viewport



Append new items when you reach the footer
Lazy load for images
Append new items while scrolling horizontally
Track elements inside a container

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:

   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.