Detect If An Element Is Seen On Scroll - jQuery See.js

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.

<script src="/path/to/cdn/jquery.min.js></script>
<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".

<div class="el">
  Element To Animate On Scroll
</div>

$(document).ready(function() {
  $(".el").see(
    "90%",
    function() {
      $(this).addClass("visible");
    },
    function() {
      $(this).removeClass("visible");
    }
  );
});

4. Animate the element using CSS animations.

.visible {
  /* CSS Animation Rules Here */
}

5. There is a real world example that shows how to use Animate.css to animate the element when scrolling down the web page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />

$(document).ready(function() {
  $(".el").see("90%", function() {
    $(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.