页面滚动到可视区域执行操作

写一个简单的方法，让窗口滚动到可视区域时，即时可以出现动画。

怎么写动画延迟，直接把类名添加在页面中，实现动画延时。譬如:

.delay200{animation-delay:200ms}
.delay500{animation-delay:500ms}

 
class="delay500" data-animate="fadeInUp">回首向来萧瑟处，归去，也无风雨也无晴。

css动画参考写法：

https://daneden.github.io/animate.css

重点是下面js

不需要改js复制即用，直接按上面的操作使用"data-animate"，里面写动画的类名即可

/*
说明：这是一个滚动到可视区域播放动画的插件，当窗口滚动到可视区域时添加ClassName进入动画；
    1.查找页面内所含有[data-animate]的元素，遍历得到他们本身；[data-animate]值为动态获取，需手写animation，
      更多动画效果请访问https://daneden.github.io/animate.css/；
    2.调用函数:计算元素是否到达可视区域 返回Boolean值；
    3.添加有动画的ClassName；
注意：此方法不能用于ifarm,窗口滚动影响判断
*/
 
$(function(){
    var windowHeight = $(window).height();  //窗口高度
    var classname;
 
    // 监听页面滚动
    $(window).scroll(function(event){
       // 添加【data-animatie】
       var dataAnimateEl = $('[data-animate]');
       if (dataAnimateEl.length > 0 ) {
        dataAnimateEl.each(function(){
            var element = $(this);                    
            var animation2  = animation1(element);              //调用函数计算是否到达可视区域 返回Boolean
            var annimationVal=element.data("animate");    
            element.css("opacity","0")               
            if (animation2) {
                element.removeClass(annimationVal).addClass(annimationVal)css("opacity","1");
            }
        })
       }
    });
 
    //函数作用：计算元素是否到达可视区域
    function animation1(classname) {
        var objHeight = $(classname).offset().top;　   //元素到顶部的高度
        let winPos = $(window).scrollTop();     //距离顶部滚动 
        let val = objHeight-winPos;        
        if (val 0) {    
        //可视区域                
            // console.log("有动画")
            return true;
        }else {
        //不可视区域
            // console.log("不在可视区域内")
            return false;
        }
    }   
    
});

 

 

转载于:https://www.cnblogs.com/Tohold/p/9373256.html