Execute Code When A Part Of Your Element Becomes Visible - on-scrolled-to.js

on-scrolled-to.js is a jQuery plugin that detects how much (from 0 to 1) your element is visible within the viewport and triggers a callback function when you scroll down the page.

The typical use of this plugin is to animate the element when a specified part of the element becomes visible when the user scrolls through your long web page.

How to use it:

1. Download and import the minified version of the on-scrolled-to.js plugin after jQuery library.

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

2. Call the function on the target element you want to keep track of the visibility. In this example, the plugin will will execute a function when 50% of the element is visible on the page.

<div class="example">
  Element
</div>

$('.block').onScrolledTo(0.5, function() {
  
  // add animation classes to the element
  this.attr('class', 'animation-class');
  
});

3. To execute a function when this element is fully visible on the page, just set the portionVisible parameter to 1.

<div class="example">
  Element
</div>

$('.block').onScrolledTo(1, function() {
  
  // add animation classes to the element
  this.attr('class', 'animation-class');
  
});

---

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