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 |
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.