JavaScript Plugin For Adding Entrance Effects To Elements - showByScroll

showByScroll is a super simple jQuery/Vanilla JavaScript plugin that adds CSS3 based entrance effects to elements when scrolling down the webpage.

How to use it:

1. Link to jQuery library (OPTIONAL) and the showByScroll plugin as follows:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/show-by-scroll.min.js"></script>

2. Call the plugin to detect whether an element scrolled into view.

// Vanilla JavaScript
const elements = document.querySelectorAll('.showbyscroll');
new ShowByScroll(elements, {

    // which class add when the object is visible
   'class': 'show',

    // screen height divided by the Index
    'offsetIndex': 1.5,

    // delay in milliseconds
    delay: 0

});

// jQuery Plugin
$( '.showbyscroll' ).showByScroll({

  // which class add when the object is visible
  'class': 'show',

  // screen height divided by the Index
  'offsetIndex': 1.5

  // delay in milliseconds
  delay: 0

});

3. Add custom CSS animations to the element when scrolled into view.

.show {
  opacity: 1;
  transform: translate(0, 0);
}

4. Trigger a function after the element has been scrolled into view.

// Vanilla JavaScript
element.addEventListener('showedByScroll', function() {
  // do something
})

// jQuery Plugin
$('.showbyscroll').on('showedByScroll', function() {
  // do something
});

Changelog:

2019-07-21

• Added delay option

2019-07-16

• Added vanilla JS version

---

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