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 
});