欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手写的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;

})();