用jquery实现页面滚动时展现动感的元素效果（有插件可实现！）

1.用jquery + animate.css实现 

 function animate() {

        var a = $(".main-service").offset().top; //元素到浏览器顶部的距离

        if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) { //页面上拉元素出现在可视化区域

            $('.main-service .title').addClass('animated zoomIn');  

            console.log("我来了")

        }

    }

 

    $(document).ready(function() {  //当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件

        animate()  //防止页面滚动到该动画效果位置用户点击了刷新没有动画效果

        $(window).scroll(function() {

            animate() //实时获取滚动条的距离，元素一出现在可视区域就添加动画效果！

        });

    });

 

2.用wow.js实现（不依赖于jquery ,只需引入wow.js和animate.css即可实现完美动画效果）

进入官网：https://www.delac.io/wow/docs.html  了解详情！