advanced in view - Free Download Advanced Is In View Plugin - jQuery inView.js

Free Download Advanced Is In View Plugin – jQuery inView.js

Posted on

This time I will share jQuery Plugin and tutorial about Advanced Is In View Plugin – jQuery inView.js, hope it will help you in programming stack.

advanced in view - Free Download Advanced Is In View Plugin - jQuery inView.js
File Size: 3.12 KB
Views Total: 666
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A small jQuery is in view plugin which determines the element visibility and executes certain functions when the element is scrolled in or out of the viewport.

The most prominent feature of this plugin is to provide a useful isSeen parameter which allows you to determine whether the element has appeared before. So you can trigger the inView function only when this element first appears.

How to use it:

1. Insert the JavaScript file inView.jquery.js after loading the latest jQuery library (slim build).

1 <script src="/path/to/cdn/jquery-VERSION.slim.min.js"></script>
2 <script src="inView.jquery.js"></script>

2. Create an element you’d like to keep track of the visibility.

1 <div class="box">
2   Element To Track
3 </div>

3. Trigger a function when the element is scrolled into view.

1 $('.box').inView({
2   in: function() {
3     // do something
4   }
5 })

4. Trigger a function when the element is scrolled out of the viewport.

1 $('.box').inView({
2   out: function() {
3     // do something
4   }
5 })

5. Trigger only once using the isSeen parameter.

1 $('.box').inView({
2   in: function(isSeen) {
3     // if not seen before
4     if (!isSeen) {
5         alert('not seen before');
6     }
7   }
8 })

6. Control the trigger point in pixels. Default: 0.

1 $('.box').inView({
2   in: function(isSeen) {
3     // if not seen before
4     if (!isSeen) {
5         alert('not seen before');
6     }
7   },
8   threshold: 50
9 })

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

source : jquery.net