可视区域加载动画

作者:lMadman
链接:https://www.jianshu.com/p/c165f2e06a44
來源:简书

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




    
    可视区域加载



    

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

可视区域加载动画_第2张图片

你可能感兴趣的:(javascript)