Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Закручивание текста при наведении

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация приукрасит любой Ваш проект, позволит добавить больше динамики.
Данная модификация позволяет создать эффект посменной смены букв, при наведении на ссылку.
Отличная возможность добавить изюминку в Ваш проект.
Обратите внимание, что данный эффект будет работать только на десктоп версии сайта, так как для мобильных разрешений нет возможности наведения.
Как это выглядит?
Внимательно следите за количеством символов в тексте, который необходимо анимировать.
Для того, чтобы посмотреть эффект, откройте сайт с ПК, с телефона этот эффект не воспроизвести.
Как это добавить?
Первый шаг
Создаём блок T123 и помещаем стили, которые даны ниже.
В rolling-text .block:last-child меняем цвет при наведении на ссылку, на свой выбор

<!-- Взято с сайта https://digistudio.su/zakruchivanie-teksta-pri-navedenii-->

<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 и помещаем в него скрипт. Важно разместить этот блок в самом низу страницы или в подвал сайта (если планируете использовать эффект на всем сайте).

<!--Взято с сайта https://digistudio.su/zakruchivanie-teksta-pri-navedenii-->
<!--Важно, разместите этот скрипт внизу страницы или в footer'e-->

<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 Block, в него добавляем текстовые области, к которым хотим применить эффект закручивания, задаем им любые ссылки.
Четвертый шаг
В этом же Zero Block'е задаем выбранным ссылкам класс через Add CSS - rolling-text
Обратите внимание, что лучше всего вещать этот класс на небольшую текстовую область.
Как Вам модификация?
Made on
Tilda