This time I will share jQuery Plugin and tutorial about Detect If An Element Is Seen On Scroll – jQuery See.js, hope it will help you in programming stack.
See.js is a small jQuery plugin (0.5 kb minified) for detecting if the user has scrolled to an element on the page or not.
Very useful for landing pages that animate the desired elements when they’re scrolled in or out of the viewport.
How to use it:
1. Include the see.js script after jQuery JavaScript library.
1 |
<script src="/path/to/cdn/jquery.min.js></script> |
2 |
<script src="/path/to/src/see.js"></script> |
2. Attach the function to the target element and pass the following parameters:
- height: The height of the window where the element is “seen”. This string can be a percentage (of the window height, specified using a percentage symbol (%)), or pixels. (specified with either no units or “px”).
- callback: Called when the element is “seen”.
- exitCallback: Called when the element is “unseen”.
01 |
$(document).ready(function() { |
05 |
$(this).addClass("visible"); |
08 |
$(this).removeClass("visible"); |
4. Animate the element using CSS animations.
5. There is a real world example that shows how to use Animate.css to animate the element when scrolling down the web page.
1 |
$(document).ready(function() { |
2 |
$(".el").see("90%", function() { |
3 |
$(this).addClass("animated jello"); |
This awesome jQuery plugin is developed by carsonalh. For more Advanced Usages, please check the demo page or visit the official website.
