可视区域加载动画

有一些需求,是当我们去浏览时才会去加载,譬如一些动画,和一些图片,那么这些是怎样实现的呢?
先来看一下下面的一段小代码:




    
    可视区域加载



    

这里主要用到了CSS3中的动画以及getBoundingClientRect()获取div到浏览器顶部的距离,和浏览器的可视高度进行对比。
先来看下getBoundingClientRect()这个方法:

可视区域加载动画_第1张图片
Paste_Image.png
可视区域加载动画_第2张图片
Paste_Image.png

你可能感兴趣的:(可视区域加载动画)