Zero блок с текстом
Инструкция
- 1
Добавляем Zero блок
- 2
Пишем текст (в примере 3 тектовых заголовка) и каждому добавляем класс mod-text
- 3
Копируем id zero блока (настройка → Block id)
- 4
Добавляем блок T123
- 5
В блоке T123 перходим в контент → вставляем код
- 4
В коде нужно указать ваш ID Zero блока
- 4
Сохраняем
- 5
Жмём опубликовать → смотрим
Код для вставки
<!--https://atilda.ru/twist-text-->
<style>
:root {
--duration: 0.6s;
--easing: cubic-bezier(0.8, 0, 0.25, 0.7);
}
/* укажите ваш id zero блока */
#rec806985777 .mod-text {
font-size: 100px;
font-family: Arial, Sans-Serif;
font-weight: bold;
cursor: pointer;
display: inline-block;
text-decoration: none;
overflow: hidden;
color: #1a1a1a;
width: auto;
height: 1.1em !important;
}
/* укажите ваш id zero блока */
#rec806985777 .mod-text:hover .letter {
transform: translateY(-100%);
}
/* укажите ваш id zero блока */
#rec806985777 .mod-text .block:last-child {
color: #e40b9b;
}
.letter {
display: inline-block;
position: relative;
transition: transform var(--duration) var(--easing);
transition-delay: var(--delay);
}
</style>
<script>
/* укажите ваш id zero блока */
const header = document.querySelectorAll('#rec806985777 .mod-text');
header.forEach((element) => {
let innerText = element.innerText;
element.innerHTML = "";
let textContainer = document.createElement("div");
textContainer.classList.add("block");
for (let i = 0; i < innerText.length; i++) {
let span = document.createElement("span");
span.innerText = innerText[i] === " " ? " " : innerText[i];
span.classList.add("letter");
span.style.setProperty("--delay", (i * 0.02) + "s");
textContainer.appendChild(span);
}
element.appendChild(textContainer);
element.appendChild(textContainer.cloneNode(true));
});
</script>
