实现滚到div时淡入效果

首先实现淡入的动画

CSS代码如下：

@keyframes float {    
from { position: relative;       
 	margin-top:200px;        
 	opacity: 0;    
 	}    
to {  position: relative;        
	margin-top: 50px;        
	opacity: 1;    
	}
}

接下来用JS判断当前滚动的位置并加入动画

window.onscroll = function() {
                //检测鼠标滚轮距离顶部位置
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(top);//页面滚动时可以得到滚动的距离可以根据这个数值来决定何时给div绑定动画
                //要设置到DIV刚显示出来时给div添加动画
　　　　　　　　   if(top > （box.offsetTop-box.offsetHeight）) { 
　　　　　　　　　　　　box.style.animation = "key 2s"//添加动画  
　　　　　　　　　　}
            }

标签：box,动画,淡入,top,滚动,div,滚到
来源： https://blog.csdn.net/weixin_43966635/article/details/102764332