关于网站预加载的动画

贴一个网站:http://www.seakong.cn/
我在刚进入这个网站的时候,里边的所有模块,在我滚动条滚到那个地方,第一次见到那个模块的时候,它就会执行一次动画,比如,有一些块是左右摇摆。
然后还有一个就是那个数字,刚打开页面进去以后,数字不是直接显示的,而是从0不断加到100来显示的,这种效果非常好看,所以想问问大家知道这种动画的原理吗?

我看了网站一部分代码,好像是网站加载事件里边,
加个animation-name设置为什么什么的?总之我也是没搞明白这个网站刚加载好的时候这个动画是怎么弄成的,如果有大佬明白的话麻烦说一声...跪谢!

阅读 2.9k
3 个回答

滚动事件 你是可以知道的,滚动值也是可以知道的。

给每一个元素块添加一个滚动监听事件,如果模块出现在浏览器窗口位置,则执行添加在该元素快上的动画。也就是计算元素的offset.top 和 滚动条卷起高度scrolltop的大小,这里有个阈值,实现起来不是那么麻烦。

可以使用 wow.js 试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题