JQuery/CSS动画转换减慢页面

我有一个页面，用户滚动和动画显示在页面上时显示，当它们不在时隐藏。每当页面滚动时都会发生这种情况，但它似乎占用了太多的处理能力，而页面却相当静态地滚动。JQuery/CSS动画转换减慢页面

这里是我使用的代码：

$('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/

来源

2016-08-31 user3706091