Lefseq,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box-container {
width: 232px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.box-container div {
height: 50px;
width: 50px;
text-align: center;
background-color: hsla(0, 0%, 75%, 1);
line-height: 50px;
position: relative;
}
.box-container div:after{
position: absolute;
content: attr(data-letter);
left: 0;
top: 0;
width: 100%;
background-color: hsla(167, 100%, 30%, 1);
display: block;
opacity: 0;
transition-duration: 1s;
transition-delay: var(--delay);
}
.box-container.show div:after{
opacity: 1;
}
</style>
</head>
<body>
<div class="box-container"></div>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
constructor(str, cls, delay=1350, pause=300){
this.parent = document.querySelector(cls);
this.items = this.createElems(str.length, "div");
delay = Array.from({length : str.length}, (v,k) => delay * k);
this.items.forEach((el,i) => {
el.textContent = i;
el.dataset.letter = str[i];
i = delay.length * Math.random()|0;
i = delay.splice(i, 1)[0];
el.style.setProperty("--delay", `${i}ms`)
});
this.parent.append(...this.items);
window.setTimeout(()=> this.parent.classList.add("show"), pause);
}
createElems(length, tagName) {
let elems = Array.from({length}, (v,k) => document.createElement(tagName));
return elems
}
}
new RandomFadeIn("FadeinImg", ".box-container")
});
</script>
</body>
</html>