whenInView

jQuery plugin to listen for when elements enter the window.

How

Include a reference to jQuery and jquery.wheninview.js in your html file.

<script src="path/to/jquery.js"></script> <script src="path/to/jquery.wheninview.js"></script>

In your document.ready function, call whenInView on any elements you want to perform a special action when entering or leaving view.

jQuery('.elements-to-mark-when-in-view').whenInView();

For default behavior, that's it! Elements that match the selector you chose will have the element-in-view class added once when in view.

Custom Callbacks

You can also specify a custom callback to be performed on an element when it enters view:

jQuery('.elements').whenInView( function($elem) {   // Do something with jQuery object $elem when it enters the viewport });

This will overwrite the default behavior (ie, the element-in-view class won't be added to elements in view any more).

If you include a second callback, that function will act on elements when they leave view:

jQuery('.elements').whenInView(   function($elem) { /* Do something with jQuery object $elem when it enters the viewport */ },   function($elem) { /* Do something with jQuery object $elem when it leaves the viewport */ } );

You can also clear these callbacks:

jQuery('.elements-with-callbacks').whenInView('clear'); // Clear all whenInView callbacks jQuery('.elements-with-callbacks').whenInView('clear', 'enter'); // Clear incoming element callbacks jQuery('.elements-with-callbacks').whenInView('clear', 'exit'); // Clear outgoing element callbacks

These are shortcuts for calling off() on the 'wheninview.enter' and 'wheninview.exit' events.

Settings

You can also define settings by passing an object:

// Default settings var settings = {   className: 'element-in-view', // The name of the class added to elements in view   container: window, // The viewport to check for elements in view   elementIn: null, // Custom callback when an element enters view (accepts single jQuery object as parameter)   elementOut: null, // Custom callback when an element leaves view (accepts single jQuery object as parameter)   topOffset: 0, // Amount of space at top of container before element registers as in view   bottomOffset: 0, // Amount of space at bottom of container before element registers as in view   staggerInterval: 0, // Time (ms) between elementIn callback firing (see below) - ignored if elementIn is not default   removeWhenOut: false, // Should the default elementOut callback remove the class when the element is out of view? - ignored if elementOut is not default   fireAtStart: true // Should we check if the element is in view right away? If not, we'll just check on scroll }

Examples

Custom class name

jQuery('element-selector').whenInView({   className: 'CUSTOM-CLASS-NAME' });

Staggered class additions

// Useful for creating staggered animations - see the images at https://kinfolklife.com/ jQuery('element-selector').whenInView({   staggerInterval: 250 });

Offsets

// Useful if there's a fixed header/footer on your page giving you false whenInView positives jQuery('element-selector').whenInView({   // These account for an 80px header and 120px footer   topOffset: 80,   bottomOffset: 120 });

Version 1.2.5

http://funkhaus.us

jQuery Plugin To Check Whether An Element Is Within The Viewport - whenInView