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