判断元素是否在可视区域内,在的话显示,否则隐藏
需求:
为每个页面元素添加效果,当元素滚动到可视区域内时缓慢显示并有一定位移效果
分析:
如果想为每个元素都添加能添加这种效果,有一个统一的class名字是最好操作的,
那么如何判断有哪些元素在可视区,哪些不在可视区而确定是否让其显示,
代码:
css代码,给每一个叫CfadeInUp的元素添加动画,设置好animation的动画效果,动画名字要用js来添加;
@keyframes CfadeInUp
{
from {transform: translateY(50px);}
to {transform: translateY(0px);
opacity:1;}
}
.CfadeInUp{
width: 100%;
height: 100px;
background-color: #000;
margin-bottom: 100px;
opacity: 0;
animation: 1s ease forwards alternate;
}
js代码
(function animateUp(){
var obj = $('.CfadeInUp');
var objH= $('.CfadeInUp').outerHeight();
var num = [];
var wH = $(window).height();
var wScrollTop = $(window).scrollTop();
// 获取页面所有obj的top位置,存入数组
for(var i=0; i<obj.length;i++){
num.push(obj.eq(i).offset().top+(objH/3));
}
// console.log(num)
// 循环数组,判断obj的位置是否在可视区中
function judgeTop(){
for(var j=0; j<num.length;j++){
if (num[j] >= wScrollTop && num[j] < (wScrollTop+wH)) {
obj.eq(j).css({
'animation-name':'CfadeInUp',
'opacity':'1'
});
}
}
};
// 页面初始化时先调用一次
judgeTop();
// 触发滚动事件调用判断函数
$(window).scroll(function(event) {
wH = $(window).height();
wScrollTop = $(window).scrollTop();
judgeTop();
});
})();