эффект побуквенной смены цвета при наведении на текст в tilda
ДИМА
Значения, которые были введены
1. Добавляем свой текст в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

2. Выбираем цвет для смены;

3. Копируем сгенерированный HTML код и вставляем его в блок Т123;

  • ВАЖНО! Если используете два слова с разными размерами шрифтов, цветов, жирности - сгенерируйте на каждой слово код со своим уникальным классом.
Як на картинке
<!--NOLIM--><!--NLM027--><!--settings{"blockClass":"letterByLetter","fontStyleItalic":"0","secondTextColor":"#6081be","offMobile":"0"}settingsend--><!--ts1742985558470ts--> <style> .letterByLetter .tn-atom { display: inline-block; overflow: hidden; white-space: nowrap; } @media screen and (min-width: 1200px){ .letterByLetter:hover .letter, .letterByLetter.play .letter { transform: translateY(-100%); } .letterByLetter .block:last-child { color: #6081be; } .letterByLetter .block { } .letterByLetter .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.015s; } .letter:nth-child(3) { transition-delay: 0.03s; } .letter:nth-child(4) { transition-delay: 0.045s; } .letter:nth-child(5) { transition-delay: 0.06s; } .letter:nth-child(6) { transition-delay: 0.075s; } .letter:nth-child(7) { transition-delay: 0.09s; } .letter:nth-child(8) { transition-delay: 0.105s; } .letter:nth-child(9) { transition-delay: 0.12s; } .letter:nth-child(10) { transition-delay: 0.135s; } .letter:nth-child(11) { transition-delay: 0.15s; } .letter:nth-child(12) { transition-delay: 0.165s; } .letter:nth-child(13) { transition-delay: 0.18s; } .letter:nth-child(14) { transition-delay: 0.195s; } .letter:nth-child(15) { transition-delay: 0.21s; } .letter:nth-child(16) { transition-delay: 0.225s; } .letter:nth-child(17) { transition-delay: 0.24s; } .letter:nth-child(18) { transition-delay: 0.255s; } .letter:nth-child(19) { transition-delay: 0.27s; } .letter:nth-child(20) { transition-delay: 0.285s; } .letter:nth-child(21) { transition-delay: 0.3s; } .letter:nth-child(22) { transition-delay: 0.315s; } .letter:nth-child(23) { transition-delay: 0.33s; } .letter:nth-child(24) { transition-delay: 0.345s; } .letter:nth-child(25) { transition-delay: 0.36s; } .letter:nth-child(26) { transition-delay: 0.375s; } .letter:nth-child(27) { transition-delay: 0.39s; } .letter:nth-child(28) { transition-delay: 0.405s; } .letter:nth-child(29) { transition-delay: 0.42s; } .letter:nth-child(30) { transition-delay: 0.435s; } .letter:nth-child(31) { transition-delay: 0.45s; } .letter:nth-child(32) { transition-delay: 0.465s; } .letter:nth-child(33) { transition-delay: 0.48s; } .letter:nth-child(34) { transition-delay: 0.495s; } .letter:nth-child(35) { transition-delay: 0.51s; } .letter:nth-child(36) { transition-delay: 0.525s; } .letter:nth-child(37) { transition-delay: 0.54s; } .letter:nth-child(38) { transition-delay: 0.555s; } .letter:nth-child(39) { transition-delay: 0.57s; } .letter:nth-child(40) { transition-delay: 0.585s; } .letter:nth-child(41) { transition-delay: 0.6s; } .letter:nth-child(42) { transition-delay: 0.615s; } .letter:nth-child(43) { transition-delay: 0.63s; } .letter:nth-child(44) { transition-delay: 0.645s; } .letter:nth-child(45) { transition-delay: 0.66s; } .letter:nth-child(46) { transition-delay: 0.675s; } .letter:nth-child(47) { transition-delay: 0.69s; } .letter:nth-child(48) { transition-delay: 0.705s; } .letter:nth-child(49) { transition-delay: 0.72s; } .letter:nth-child(50) { transition-delay: 0.735s; } .letter:nth-child(51) { transition-delay: 0.75s; } .letter:nth-child(52) { transition-delay: 0.765s; } .letter:nth-child(53) { transition-delay: 0.78s; } .letter:nth-child(54) { transition-delay: 0.795s; } .letter:nth-child(55) { transition-delay: 0.810s; } .letter:nth-child(56) { transition-delay: 0.825s; } .letter:nth-child(57) { transition-delay: 0.84s; } .letter:nth-child(58) { transition-delay: 0.855s; } .letter:nth-child(59) { transition-delay: 0.87s; } .letter:nth-child(60) { transition-delay: 0.885s; } } </style> <script> (function(){ if (window.innerWidth >= 1200){ function t_ready(t) { "loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { "loading" != document.readyState && t() }) } t_ready(function() { let into = setInterval(function() { let selectorclass = document.querySelectorAll('.letterByLetter'); let selectorclassAtom = document.querySelectorAll('.letterByLetter .tn-atom'); if (selectorclass.length == selectorclassAtom.length) { clearInterval(into); selectorclassAtom.forEach(function(atom) { let into2 = setInterval(function() { let elemStyle = window.getComputedStyle(atom); if (elemStyle.lineHeight) { clearInterval(into2); let animtextheight; if (Number(elemStyle.lineHeight.replace("px", ""))) { animtextheight = elemStyle.lineHeight.replace("px", ""); } else { animtextheight = elemStyle.fontSize.replace("px", ""); } let link = atom.querySelector("a"); if (link) { var innerText = link.innerText; link.innerHTML = ''; } else { var innerText = atom.innerText; atom.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); } if (link) { link.appendChild(textContainer); link.appendChild(textContainer.cloneNode(true)); } else { atom.appendChild(textContainer); atom.appendChild(textContainer.cloneNode(true)); } setTimeout(() => { atom.classList.add('play'); }, 600); atom.addEventListener('mouseover', () => { atom.classList.remove('play'); }); atom.style.setProperty("height", `${animtextheight}px`, "important"); } }, 50); }); } }, 50); }); } })()</script>