jQuery随鼠标滚动触发CSS3动画

想要给页面添加加载动态，随着鼠标滚动自动出现。网上有大把插件可以实现这个功能，但如果不使用插件，仅依赖一个jquery怎样操作能够实现随鼠标滚动加载呢？

从理论上说，如果使用相同的类名，而后从第一个到最后一个按顺序计算到顶部的高度，而后根据这个高度决定给哪个类添加CSS动画即可实现这个效果。

页面元素只有几个还好，大不了一个个计算，但如果页面元素有十多个呢？如果我想整站都用这种“CSS伪动态加载”呢？难道每个页面都这样写一遍吗？

按顺序排列的eq，似乎在嘲笑着我。那么，到底应该怎么做？

我试着n=0，而后n++，遗憾的是，始终跑不起来。

老天不愿让我太过轻松而设置了重重考验，但我付出努力的时候还是没有吝啬给我点拨，这一次，也是。for循环，改造代码，而后，我看着页面成功动起来了。

源码参考

$(window).on('scroll',function(){
   dist = $(".distance");
   winheight = $(window).height();
   for (var i=0;i<dist.length;i++){
      distance = (dist.eq(i).offset().top)-winheight;
      if($(window).scrollTop()>=distance){
         $(".distance").eq(i).addClass("fadeInUp");
      }
   }
})

此处需要注意的是，我的所有元素父级全部使用了一个统一的类“distance”，如此方能一个个执行下去。
 

附注

本方案为多年以前研究，在后来的实战中发现使用wow.js搭配animate.css，非常简单易用。此外，swiper也同样有animate.css的创建方案。