判断对象进入可视区域添加飞入效果

我们先来讨论如何实现这个效果，我利用了一个效果库

https://github.com/daneden/animate.css 这个是它的来源GitHub

https://daneden.github.io/animate.css/ 这个是效果的体现，可供选择，我们选择一个从下飞入效果“bounceInUp”

有了这个类库之后，引入CSS文件就可以开始用了。

 $("#div").addClass("animated  bounceInUp delay-2s ");

像上面这行代码，获取id名为div的盒子，在盒子进入可视化区域的时候给它添加效果类。

那么如何判断这个盒子进入了浏览器的可视区域呢？

我们先上JS的代码再来解释（JQ是3.3.1版本）

<script type="text/javascript">
            $(document).ready(function () {
                $(window).scroll(function () {
                    var a = document.getElementById("div").offsetTop;/*偏移量*/
                    if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                        $(function(){
                            $("#div").addClass("animated  bounceInUp delay-2s ");
                        })
                    }
                });
            });
        </script>

jQuery(window).scrollTop()：窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离

jQuery('#div').offset().top：#div 的绝对偏移量,指#div的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变

jQuery(window).height()：浏览器窗口可视区域的高度

也就是说当 （div上边界到整个页面顶端的距离） 小于 （整个页面滚动距离+窗口可视区高度） 时，div就判定为出现在可视区域。

整个只要执行JQ向div添加效果类就可以实现飞入效果了。

事实上判断元素进入可视区域的算法五花八门，可以选择自己最好理解的就行了。