isVisible

A jQuery plugin for detect if element is in device viewport.

Including files

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- isVisible core JS file -->
<script src="jquery.isvisible.min.js"></script>

Initializing

$(document).ready( function() {
  $('.selector').isVisible();
});

Settings

isVisible accepts settings from an object of key/value pairs.

Example:

$('.selector').isVisible({
  key: value,
  key: value
});

List of settings

showClass:

Boolean: Add classes to the element when is visible a part ( .is-visible-top ecc.. )

Default: true

removeClass:

Boolean: Remove "ShowClass" classes when is out of viewport ( "false" is useful when animations are used only once )

Default: true

offset:

Integer: Change the location of the trigger point (All sides and all elements)

Default: 0

offsetTop:

Integer: Change the location of the top side trigger point (All elements)

Default: 0

offsetBottom:

Integer: Change the location of the bottom side trigger point (All elements)

Default: 0

offsetLeft:

Integer: Change the location of the left side trigger point (All elements)

Default: 0

offsetRight:

Integer: Change the location of the right side trigger point (All elements)

Default: 0

classXY:

String: Class added to the element when all sides are in viewport

Default: is-visible

classX:

String: Class added to the element when left and right sides are in viewport

Default: is-visible-x

classY:

String: Class added to the element when top and bottom sides are in viewport

Default: is-visible-y

classTop:

String: Class added to the element when top side is in viewport

Default: is-visible-top

classBottom:

String: Class added to the element when bottom side is in viewport

Default: is-visible-bottom

classLeft:

String: Class added to the element when left side is in viewport

Default: is-visible-left

classRight:

String: Class added to the element when right side is in viewport

Default: is-visible-right

dataName:

String: Name of the data attribute which sets an offset on all sides ( Works on sigle element )

Default: is-visible-offset

dataNameTop:

String: Name of the data attribute which sets a top offset ( Works on sigle element )

Default: is-visible-offset-top

dataNameBottom:

String: Name of the data attribute which sets a bottom offset ( Works on sigle element )

Default: is-visible-offset-bottom

dataNameLeft:

String: Name of the data attribute which sets a left offset ( Works on sigle element )

Default: is-visible-offset-left

dataNameRight:

String: Name of the data attribute which sets a right offset ( Works on sigle element )

Default: is-visible-offset-right

Event Hooks

isVisible : This event is triggered when element is in the viewport

Event extra parameters (strings):

visiblePart: Name of the side visible ( xy, x, y, top, bottom, left, right )

scrollDirectionY: Direction of the scroll on Y axis ( up, down)

scrollDirectionX: Direction of the scroll on X axis ( left, right)

Example:

$('.selector').on( 'isVisible', function( event, visiblePart, scrollDirectionY, scrollDirectionX  ) {
  if ( visiblePart == "y") {
    // Your code here
  }
});

Credits

Copyright (c) 2017 Fabio Quarantini

License

MIT License