手写的wow.js解析
程序员文章站
2024-01-24 19:45:16
手写的 wow.js
用法: 给相应的dom添加 : class与data-class 设置 css 应用js
class与data-class
css
.a-fadein{
animation:...
手写的 wow.js
用法: 给相应的dom添加 : class与data-class 设置 css 应用js
class与data-class
css
.a-fadein{
animation: fadein 1s both;
}
@keyframes fadein{
0%{opacity:0};
100%{opacity:1};
}
.wow{
visibility: hidden;
}
js
(function(){
let w = document.getelementsbyclassname('wow');
let l = w.length;
// 存储 wow的数据height与class
let hc = [];
for(let i = 0;i 0){
w[i].classname = w[i].classname.replace('a-fadein',' ');
console.log(w[i].classname);
w[i].style.visibility = 'hidden';
}
}else{
if(w[i].classname.indexof(hc[i].c) < 0){
w[i].classname += " " + hc[i].c;
w[i].style.visibility = 'visible';
}
}
}
}
window.onscroll = wow;
window.onload = wow;
})();