Trigger Appear/Disappear Events On Scroll - Appear.js

Appear.js is a small, fast and easy jQuery based 'Is In Viewport' check plugin which triggers appear/disappear events when a specific element is scrolled into or out of the viewport.

Installation:

# Yarn
$ yarn add jquery-appear-original

# NPM
$ npm install jquery-appear-original --save

How to use it:

1. Download and place the JavaScript file 'Appear.js' after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.appear.js"></script>

2. Detect if an element is within the document or not.

$.appear('Selector');
// or
$('Selector').appear();

3. Bind appear/disappear events to the target element.

$('Selector').on('appear', function(event, $all_appeared_elements) {
  // on appear
});

$('Selector').on('disappear', function(event, $all_disappeared_elements) {
  // on disappear
});

// or

$(document.body).on('appear', 'Selector', function(event, $all_appeared_elements) {
  // on appear
});

$(document.body).on('disappear', 'Selector', function(event, $all_disappeared_elements) {
  // on disappear
});

4. Define how often the plugin checks the element's visibility.

$.appear('Selector',{
  interval: 250
});

// or
$('Selector').appear({
  interval: 250
});

5. Force elements's appearance check.

$.appear('Selector',{
  force_process: true // default: false
});

// or
$('Selector').appear({
  force_process: true // default: false
});

6. The plugin also provides a custom jQuery filtering method:

$('Selector').is(':appeared')

Changelog:

2019-06-19

• Bugfix

---

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