/showByScroll

JQuery plugin for display blocks by scrolling window

Primary LanguageHTML

Show by scroll

Plugin for display items when scrolling down and appearing item on the screen.

Supported JQuery but available vanilla js way.

1. Include script

<script src=”show-by-scroll.min.js”></script>

2. Initialization function for the desired element

// Vanilla Javascript

const elements = document.querySelectorAll('.showbyscroll');
const options = {
    className: 'show',
    offsetIndex: 1.5
};

new ShowByScroll(elements, options);
// jQuery

$(function() {
    $('.showbyscroll').showByScroll({
        className: 'show',
        offsetIndex: 1.5
    });
});
  • className [string] - what class will be added when the item is visible (default: "show");
  • offsetIndex [number] - percentage of screen causing the event (default: 1). onlyView [boolean] - handle the items above viewport? (default: false)
  • delay [number] - it will push element to queue and appears one by one (default: 0).

3. Trigger for added class and element showed

// Vanilla Javascript

const element = document.querySelector('.showbyscroll');
element.addEventListener('showedByScroll', function() {
    // when element triggered 
})
// jQuery

$('.showbyscroll').on('showedByScroll', function() {
    // when element triggered 
});