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