Minimalist Is In View Detect Plugin - jQuery inViewport.js
File Size: | 3.54 KB |
---|---|
Views Total: | 1010 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

inViewport.js is an ultra-small (only 10 lines of code) jQuery is in view checker that detects and triggers a function when a specified element is about to or has been scrolled to the viewport.
How to use it:
1. Load the main JavaScript jquery.inviewport.js
after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.inviewport.js"></script>
2. Detect if part of your element is scrolled into view and do something by adding & removing CSS classes from the element as you scroll down or up the webpage.
$(window).on('resize scroll', function() { $('.your-element').each(function() { if($(this).inViewport('-150')) { $(this).addClass('customClass'); } else { $(this).removeClass('customClass'); } }); });
3. Use this plugin to animate elements using CSS animations.
.inview { /* CSS Animations Here */ }
This awesome jQuery plugin is developed by craigerskine. For more Advanced Usages, please check the demo page or visit the official website.