<!--Закручивание текста-->
<!--https://mt-webdesign.ru/rolling-text-->
<style>
.rolling-text .tn-atom a {
display: inline-block;
line-height: 115%;
height: 1.1em !important;
overflow: hidden;
position: relative;
}
.rolling-text .tn-atom a .letter {
display: inline-block;
transform: translateY(0);
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.rolling-text .tn-atom a:hover .letter, .rolling-text.play .letter {
transform: translateY(-100%);
}
.rolling-text .block:last-child {
color: red;
}
</style>
<script>
let elements = document.querySelectorAll('.rolling-text .tn-atom a');
elements.forEach(element => {
let innerText = element.innerText;
element.innerHTML = '';
for (let i = 0; i < 2; i++) {
let textContainer = document.createElement('div');
textContainer.classList.add('block');
let delay = 0;
for (let letter of innerText) {
let span = document.createElement('span');
span.innerText = letter.trim() === '' ? '\xa0' : letter;
span.classList.add('letter');
span.style.transitionDelay = delay + 's';
textContainer.appendChild(span);
delay += 0.03;
}
element.appendChild(textContainer);
}
});
</script>