Заголовок и описание появляются по буквам со свечением. Запускается при загрузке страницы.
uc-animated.<style>
@keyframes letter-glow {
0% {
opacity: 0;
text-shadow: 0px 0px 1px rgba(233, 255, 113, 0.1);
}
66% {
opacity: 1;
text-shadow: 0px 0px 15px rgba(233, 255, 113, 0.9);
}
77% {
opacity: 1;
}
100% {
/*opacity: 0.7;*/
opacity: 1;
text-shadow: 0px 0px 30px rgba(233, 255, 113,, 0.0);
}
}
.uc-animated :is(.t-descr, .t-title) >span {
animation: letter-glow 2.7s 0s ease both;
}
</style>
<script>
function letterGlow(selector, letterDelay) {
if(letterDelay==undefined) letterDelay = 0.05;
let delay = 0;
for(const textBlock of document.querySelectorAll(selector)) {
const text = textBlock.innerText;
$(textBlock).empty();
for(const char of text) {
$("<span />")
.text(char)
.css({"animation-delay": `${delay}s`})
.appendTo(textBlock);
delay += letterDelay;
}
}
}
letterGlow(".uc-animated :is(.t-descr, .t-title)");
</script>