This time I will share jQuery Plugin and tutorial about JavaScript Plugin For Adding Entrance Effects To Elements – showByScroll, hope it will help you in programming stack.
showByScroll is a super simple jQuery/Vanilla JavaScript plugin that adds CSS3 based entrance effects to elements when scrolling down the webpage.
How to use it:
1. Link to jQuery library (OPTIONAL) and the showByScroll plugin as follows:
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/show-by-scroll.min.js"></script> |
2. Call the plugin to detect whether an element scrolled into view.
02 |
const elements = document.querySelectorAll('.showbyscroll'); |
03 |
new ShowByScroll(elements, { |
05 |
// which class add when the object is visible |
08 |
// screen height divided by the Index |
11 |
// delay in milliseconds |
17 |
$( '.showbyscroll' ).showByScroll({ |
19 |
// which class add when the object is visible |
22 |
// screen height divided by the Index |
25 |
// delay in milliseconds |
3. Add custom CSS animations to the element when scrolled into view.
3 |
transform: translate(0, 0); |
4. Trigger a function after the element has been scrolled into view.
2 |
element.addEventListener('showedByScroll', function() { |
7 |
$('.showbyscroll').on('showedByScroll', function() { |
Changelog:
2019-07-21
2019-07-16
This awesome jQuery plugin is developed by Kraigo. For more Advanced Usages, please check the demo page or visit the official website.
