Меню

Закручивание текста при наведении

Закручивание текста при наведении

Модификация позволяет создать эффект посменной смены букв, при наведении на ссылку.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
41012835
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём необходимый текст, вешаем на него ссылку и добавляем класс rolling-text
Шаг 1
Ниже создаём блок T123 и добавляем код
Шаг 2
<!--Закручивание текста-->
<!--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>
В коде меняем цвет на свой
Шаг 3
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Эффект следа из изображений
Tilda
Анимация градиента на тексте
Tilda
Made on
Tilda