一直很羡慕“别人家的网站”那种随着鼠标滚动，内容一点一点出现的效果，整个感觉就很高档。

 

于是半年前，我费劲了心思查找怎样做。不知道是我搜索关键词有问题，还是查阅的经验太少，我只能计算当前类到首页的高度，计算屏幕高度，而后设置动画。

 

最终的成品，是这样的。

 

此次网站改版，旧事又提上日程。外行或许什么都不懂，但我不喜欢自己写的代码是这个样子。于是，我又开启了一轮摸索+搜索的旅程。

 

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

 

只是理论似乎始终只是理论，我没写出来。

 

甚至，我想尽方式将“jQuery”、“鼠标滚动”、“滚动加载”、“CSS动画”融入到搜索关键词中，大佬们给出的解决方案还是这样。

贴出来的gif图显示这段代码出自知名游戏公司。

 

于是，我又写了一次，最终的结果是这样的。

但这依然不是我想要的。
 

页面元素只有几个还好，大不了一个个计算，但如果页面元素有十多个呢？如果我想整站都用这种“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”，如此方能一个个执行下去。

观摩效果请点击链接：猎头公司