WatchView

The WatchView module provides an easy way to animate objects when you scroll down to its position and make them appear in their place.

Usage:

$(selector).watchView();
$(selector).watchView('add-this-class-name');
$(selector).watchView({
  // Run on objects with given settings
    'offsetTop': 150,
    'offsetBottom': -40 });
$.fn.watchView({ // Set global settings
  'offsetTop': 150,
  'offsetBottom': -40
});

OR

automatically applied to all elements with following class names (.*-once effects are played only once):

Generic classes:

• .watch-view
• .watch-view-full - animate only if the object is fully visible (without it starts animation when part is visible)
• .watch-view-video - this class will auto-play/stop <video> (place on <video> or any of its parents)

Effect classes:

• .anim-fly-left
• .anim-fly-left-once
• .anim-fade-in
• .anim-fade-in-once
• .anim-fly-bottom
• .anim-fly-bottom-once
• .anim-fly-right
• .anim-fly-right-once

Class names with 'anim-' prefix provide inbuilt standard CSS animations.

Elements will gain following classes:

• .watched - added immediately to all elements
• .viewed - when element was viewed at least once
• .off-screen - element is currently not visible
• .on-screen - element is currently visible

Classes with -still prefix behave the same as classes above with the exception that they will be added/removed only if browser scrolling stops for a moment.

• .viewed-still - when element was viewed at least once and scrolling stopped.
• .off-screen-still - element is currently not visible and scrolling stopped.
• .on-screen-still - element is currently visible and scrolling stopped.

Javascript events that are fired on element:

• viewed - when element was been viewed at least once
• off-screen - element is currently not visible
• on-screen - element is currently visible