inView is a lightweight (1kb minified) jQuery viewport detection plugin that automatically adds the CSS class is-in-view
to desired elements when they're scrolled into view.
Ideal for animating DOM elements using CSS3 animations when they become visible within the document.
- Get the current offset scrolled from the top
- Get the window's height
- Loop through each of the elements gathered by the selector above the scroll event
- Get the distance from the top of the document to the top of the element
- Get the distance from the top of the document to the bottom of this element
- Check if the top of the element is in the viewport, Or check if the bottom is in view
- Run the
checkWatchedElements
function once to see if the plugin needs to add the class to any currently viewable elements before a scroll event
How to use it:
1. Include the JavaScript file inView.jquery.min.js
after loading jQuery library (slim build is recommended).
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="inView.jquery.js"></script>
2. Add the CSS class in-view-watcher
to the target element you'd like to track the visibility.
<div class="box in-view-watcher"> element here </div>
3. That's it. Animate the element using your own CSS3 animations.
.in-view-watcher.is-in-view { /* your own animations here */ }
This awesome jQuery plugin is developed by nox7. For more Advanced Usages, please check the demo page or visit the official website.