Кейсы
Контакты
Обратная связь
Алена Косинова
Веб-дизайнер с опытом более трех лет
Создаю эффективные, удобные и красивые сайты, которые точно выделят вас от конкурентов.
Я всегда готова ответить на все ваши вопросы
Более четырёх лет в дизайне

Создаём блок T123 и помещаем стили. В rolling-text .block:last-child меняем цвет при наведении на ссылку, на свой выбор
<style>
.rolling-text .tn-atom a {
display: inline-block;
line-height: 100%;
height: 1em !important;
overflow: hidden;
}
.rolling-text .tn-atom a:hover .letter, .rolling-text.play .letter {
transform: translateY(-100%);
}
.rolling-text .block:last-child {
color: #d3a13b;
}
.rolling-text .letter {
display: inline-block;
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.letter:nth-child(1) {
transition-delay: 0s;
}

.letter:nth-child(2) {
transition-delay: 0.03s;
}

.letter:nth-child(3) {
transition-delay: 0.06s;
}

.letter:nth-child(4) {
transition-delay: 0.09s;
}

.letter:nth-child(5) {
transition-delay: 0.12s;
}

.letter:nth-child(6) {
transition-delay: 0.15s;
}

.letter:nth-child(7) {
transition-delay: 0.18s;
}

.letter:nth-child(8) {
transition-delay: 0.21s;
}

.letter:nth-child(9) {
transition-delay: 0.24s;
}

.letter:nth-child(10) {
transition-delay: 0.27s;
}

.letter:nth-child(11) {
transition-delay: 0.3s;
}

.letter:nth-child(12) {
transition-delay: 0.33s;
}

.letter:nth-child(13) {
transition-delay: 0.36s;
}

.letter:nth-child(14) {
transition-delay: 0.39s;
}

.letter:nth-child(15) {
transition-delay: 0.42s;
}

.letter:nth-child(16) {
transition-delay: 0.45s;
}

.letter:nth-child(17) {
transition-delay: 0.48s;
}

.letter:nth-child(18) {
transition-delay: 0.51s;
}

.letter:nth-child(19) {
transition-delay: 0.54s;
}

.letter:nth-child(20) {
transition-delay: 0.57s;
}

</style>
Создаём блок T123 и помещаем скрипт
<script>let elements = document.querySelectorAll('.rolling-text .tn-atom a');

elements.forEach(element => {
let innerText = element.innerText;
element.innerHTML = '';

let textContainer = document.createElement('div');
textContainer.classList.add('block');

for (let letter of innerText) {
let span = document.createElement('span');
span.innerText = letter.trim() === '' ? '\xa0': letter;
span.classList.add('letter');
textContainer.appendChild(span);
}

element.appendChild(textContainer);
element.appendChild(textContainer.cloneNode(true));
});

</script>
В Zero блоке создаём ссылку, на которую хотим применить эффект
ЗАКРУЧИВАНИЕ ТЕКСТА НА КНОПКЕ
На кнопку добавляем класс rolling-text
Подключаем стили для работы кнопки
<style>

.content-wrapper {
width: 100%;
overflow: hidden;
height: 1em;
line-height: 1;
display: block;
}

.rolling-text .tn-atom {
line-height: 100%;
overflow: hidden;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.rolling-text .tn-atom:hover .letter, .rolling-text.play .letter {
transform: translateY(-100%);
}
.rolling-text .block:last-child {
color: #d3a13b;
}
.rolling-text .letter {
display: inline-block;
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.letter:nth-child(1) {
transition-delay: 0s;
}

.letter:nth-child(2) {
transition-delay: 0.03s;
}

.letter:nth-child(3) {
transition-delay: 0.06s;
}

.letter:nth-child(4) {
transition-delay: 0.09s;
}

.letter:nth-child(5) {
transition-delay: 0.12s;
}

.letter:nth-child(6) {
transition-delay: 0.15s;
}

.letter:nth-child(7) {
transition-delay: 0.18s;
}

.letter:nth-child(8) {
transition-delay: 0.21s;
}

.letter:nth-child(9) {
transition-delay: 0.24s;
}

.letter:nth-child(10) {
transition-delay: 0.27s;
}

.letter:nth-child(11) {
transition-delay: 0.3s;
}

.letter:nth-child(12) {
transition-delay: 0.33s;
}

.letter:nth-child(13) {
transition-delay: 0.36s;
}

.letter:nth-child(14) {
transition-delay: 0.39s;
}

.letter:nth-child(15) {
transition-delay: 0.42s;
}

.letter:nth-child(16) {
transition-delay: 0.45s;
}

.letter:nth-child(17) {
transition-delay: 0.48s;
}

.letter:nth-child(18) {
transition-delay: 0.51s;
}

.letter:nth-child(19) {
transition-delay: 0.54s;
}

.letter:nth-child(20) {
transition-delay: 0.57s;
}

</style>
Подключаем скрипт
<script>let elements = document.querySelectorAll('.rolling-text .tn-atom');

elements.forEach(element => {
let innerText = element.innerText;
element.innerHTML = '';

let textContainer = document.createElement('div');
textContainer.classList.add('block');

for (let letter of innerText) {
let span = document.createElement('span');
span.innerText = letter.trim() === '' ? '\xa0': letter;
span.classList.add('letter');
textContainer.appendChild(span);
}

element.appendChild(textContainer);
element.appendChild(textContainer.cloneNode(true));
});

</script>
Добавлем дополнительный скрипт.
<script>
$('.tn-elem__4427362451651523252293 .block').wrapAll("<div class='content-wrapper'></div>");
$('.tn-elem__4427362451651528442646 .block').wrapAll("<div class='content-wrapper'></div>");
</script>
Заменяем класс кнопки .tn-elem__4427362451651523252293 на свой (его можно посмотреть через инспектор кода в браузере)
Если нужно создать несколько кнопок, то дублируем строку ниже и заменяем повторно класс.
Made on
Tilda