Minimal Is In Viewport Check Plugin - jQuery inView

File Size: 16.8 KB
Views Total: 1653
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Is In Viewport Check Plugin - jQuery inView

inView is a cross-browser, super tiny (~1kb minified) jQuery plugin that detects the scroll event and triggers a custom function as a specific DOM element enters the viewport.

How to use it:

1. Load the JavaScript file inView.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="inView.js"></script>

2. Setup the plugin with HTML data attribute.

<!-- Lorem ipsum Here -->
<div data-inview="alert('I\'m in view!')">Can you see me?</div>
<!-- Lorem ipsum Here -->

3. Setup the plugin with jQuery.

<!-- Lorem ipsum Here -->
<div id="myElem">Can you see me?</div>
<!-- Lorem ipsum Here -->
$("#myElem").inView(function(){
  alert("I'm in view!");
});

4. Setup the plugin with JavaScript.

<!-- Lorem ipsum Here -->
<div id="myElem">Can you see me?</div>
<!-- Lorem ipsum Here -->
inView("#myElem", function(){
  alert("I'm in view!");
});

This awesome jQuery plugin is developed by dustinpoissant. For more Advanced Usages, please check the demo page or visit the official website.