Give the people confetti 🎉

mode_confettis.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
 
 <div id="bottom_of_page">Thanks for scrolling to the bottom 🙌</div>
 
 <div>Enjoy some confetti 🎉</div>
 
 <script>
 
   /*
   Show confetti if they scroll to the bottom of the report
   */
   function showConfetti() {
     // Docs: https://www.npmjs.com/package/canvas-confetti
     confetti({
       particleCount: 150,
       spread: 150,
       origin: {
         y: 1
       }
     });
   }
 
   // From stack overflow:
   // https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
   $.fn.inView = function() {
     if (!this.length)
       return false;
     var rect = this.get(0).getBoundingClientRect();
 
     return (
       rect.top >= 0 &&
       rect.left >= 0 &&
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   };
 
   window.didTheyGetConfetti = false;
 
   $(window).on('scroll', function() {
 
     // if( $('#text_c2e50381-0d2e-4596-9324-8082b0498732').inView() ) {
     if ($('#bottom_of_page').inView()) {
       if (!window.didTheyGetConfetti) {
         showConfetti()
         window.didTheyGetConfetti = true;
       }
     }
   });
 </script>