Detect And Manipulate Element Visibility In Browser - VisibleElements

Yet another jQuery based element visibility detection plugin which adds custom class(es) to selected elements and executes a certain callback function when they enter or leave the viewport.

How it works:

• Checks the current position of the window.
• Applies the offset if used.
• Adds the class when the elements is currently visible on the window.
• Calls the function if used.
• Removes the class if the element is still below the screen.

How to use it:

1. Import both jQuery library and the visibleelements.js script into your html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="visibleelements.js"></script>

2. Attach the plugin to the element which you want to track the visibility.

<div class="demo">
  <h2>VisibleElements</h2>
</div>

$(window).scroll(function(){
  $('.demo').visibleElements();
});

3. By default, the plugin automatically add the class 'onScreen' to the element when it is scrolled into view. You can animate the element using your own CSS3 styles.

.onScreen {
  /* styles here */
}

4. You can also apply custom classes to the element when it is scrolled into view. In this example, the plugin uses animate.css to animate the element when it enter the viewport.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
      integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
      crossorigin="anonymous">

$(window).scroll(function(){
  $('.demo').visibleElements({
    customClass:'animated swing'
  });
});

5. Add offsets from the top or bottom of the element.

$(window).scroll(function(){
  $('.demo').visibleElements({
    offsetTop: null, 
    offsetBottom: null
  });
});

6. Determine whether to remove the class when the elements leaves the screen upwards.

$(window).scroll(function(){
  $('.demo').visibleElements({
    removeAfter: false
  });
});

7. Determine whether the plugin will only run once.

$(window).scroll(function(){
  $('.demo').visibleElements({
    runOnce: false
  });
});

8. Call a function when element is on screen.

$(window).scroll(function(){
  $('.demo').visibleElements({
    isOnScreen: function() {}
  });
});

---

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