JQuery/CSS animate переходы замедления страницы

Question

У меня есть страница, где пользовательские прокрутки и анимации отображаются, когда они видны на странице, и скрываются, когда они не являются. Это происходит всякий раз, когда страница прокручивается, но, похоже, она потребляет слишком много вычислительной мощности, а прокрутки страниц довольно статично.

Вот код, я использую:

$('body').scroll(function(){ 


     $('.anim').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $(this).removeClass("hidden"); 
      $(this).addClass("visible animated fadeIn"); 
      } else { 
      // element has gone out of viewport 
      $(this).removeClass("visible animated fadeIn"); 
      $(this).addClass("hidden"); 
      } 
     }); 


     $('.anim_bounceIn').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $(this).removeClass("hidden"); 
      $(this).addClass("visible animated bounceIn"); 
      } else { 
      // element has gone out of viewport 
      $(this).removeClass("visible animated bounceIn"); 
      $(this).addClass("hidden"); 
      } 
     }); 

     $('.anim_bounceInUp').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $("#"+$(this).attr("relID")).removeClass("hidden"); 
      $("#"+$(this).attr("relID")).addClass("visible animated bounceInUp"); 
      } else { 
      // element has gone out of viewport 
      $("#"+$(this).attr("relID")).removeClass("visible animated bounceInUp"); 
      $("#"+$(this).attr("relID")).addClass("hidden"); 
      } 
     }); 

    }); 

По моим сведениям, стреляя функции на свитке не очень эффективным. Есть ли лучший способ для меня сделать это?

Вот страница в вопросе, его просто тестовая область ...

http://185.116.213.24/~demotester/brochure-test/

Answer 1

This readme говорит, что вам нужно просто поймать inview события withoyt любых прямых взаимодействий с scroll события.

Кроме того, в любом случае, если вам нужно поймать scroll событие по какой-то причине, обработчик должен быть таким же легким, насколько это возможно. Например, вы должны кэшировать все объекты jQuery в глобальных переменных вне обработчика вместо вызова конструктора каждый раз.