• Stars
    star
    1
  • Language
    HTML
  • Created about 10 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JQuery plugin for display blocks by scrolling window

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