function textSplice() {
var dom = document.querySelector("#app");
var arr = dom.innerText.split("");
dom.style.opacity = 1;
dom.innerHTML = "";
arr.forEach((text, index) => {
var el
console.log(text)
if (index != 4) {
el = document.createElement('span');
el.innerHTML = text;
el.style.display = "inline-block";
el.classList.add("slidersShow");
} else{
el = document.createElement('br');
}
setTimeout(function(){
dom.appendChild(el);
}, 100 * index)
});
}
css
@keyframes sliderShow{
0% {opacity: 0; transform: translateY(-50px);}
50% {opacity: .5; transform: translateY(20px);}
100% {opacity: 1; transform: translateY(0px);}
}
.slidersShow{
animation: sliderShow linear .5s forwards;
}