This time I will share jQuery Plugin and tutorial about Execute Code When A Part Of Your Element Becomes Visible – on-scrolled-to.js, hope it will help you in programming stack.
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.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5 |
<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.
4 |
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.
1 |
$('.block').onScrolledTo(1, function() { |
4 |
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.
