Setup
Info
Info
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
URL скопирован в буфер обмена!
<script>
window.onload = function() {
function processElements(selector) {
let elements = document.querySelectorAll(selector);
elements.forEach(element => {
let originalText = element.textContent.trim();
let wrappedText = '<div><span>' + originalText.split('').join('</span><span>') + '</span></div>';
element.innerHTML = wrappedText;
});
let delay = 0.03;
elements.forEach(el => {
let spanElements = el.querySelectorAll('div span');
spanElements.forEach((span, index) => {
span.style.setProperty("--d", (delay * (index + 1)) + "s");
});
});
}
// элементы с кнопкой
processElements('.btn-sonneto-primary .tn-atom');
// текстовые элементы с ссылкой
processElements('.btn-sonneto-primary .tn-atom a');
};
</script>
window.onload = function() {
function processElements(selector) {
let elements = document.querySelectorAll(selector);
elements.forEach(element => {
let originalText = element.textContent.trim();
let wrappedText = '<div><span>' + originalText.split('').join('</span><span>') + '</span></div>';
element.innerHTML = wrappedText;
});
let delay = 0.03;
elements.forEach(el => {
let spanElements = el.querySelectorAll('div span');
spanElements.forEach((span, index) => {
span.style.setProperty("--d", (delay * (index + 1)) + "s");
});
});
}
// элементы с кнопкой
processElements('.btn-sonneto-primary .tn-atom');
// текстовые элементы с ссылкой
processElements('.btn-sonneto-primary .tn-atom a');
};
</script>
- Открываем Zero Block и заходим в режим редактирования.
- Вставляем кнопку на страницу и назначаем ей класс: btn-sonneto-primary
- Далее добавляем блок T123 и вставляем в него подготовленный код после дополнительных настроек в генераторе.
- Дополнительно добавляем блок Т123 и вставляем в него скрипт после кода из генератора.
Настройки модификации
Модификатор для кнопок, который добавляет эффект волны.
Эффект волны для кнопки
Генератор кода
81512056
id:
Теги
Модификация
#
CSS
#
Кнопки
#
Подключение скриптов
Базовые настройки
- Для корректной работы эффекта каждую букву текста кнопки оборачивает <span> через JS, поэтому HTML текста кнопки не должен содержать вложенных элементов.
- Анимация букв запускается при наведении (hover) на элемент .tn-atom или ссылку внутри него.
- Используется CSS keyframes move, который сдвигает буквы вверх (translateY(var(--move))) в 40% ключевого кадра.
- Задержка для каждой буквы задаётся индивидуально через переменную CSS --d, чтобы создать эффект волны.
- Эффект корректно работает на кнопках и текстовых ссылках меню (.tn-atom a).
- Если текст кнопки многострочный, важно проверять корректное отображение анимации, так как каждое <span> создаётся отдельно.
- При большом количестве кнопок с анимацией может быть нагрузка на рендеринг → оптимально использовать для ключевых элементов.
- Для правильного отображения кнопки важно, чтобы родительский блок имел display: flex (например, класс .t-col-flex).
Технические советы
- Если в кнопке используется многострочный текст, важно проверять корректность позиционирования стрелки (top: 50% + transform)
- В Safari и Firefox возможны различия в сглаживании анимации заливки — лучше тестировать на разных браузерах
- Если кнопка используется на тёмном фоне, стоит изменить цвета стрелки (border-top/right) и текста при ховере, чтобы сохранить читаемость
- При большом количестве кнопок с такой анимацией может быть нагрузка из-за JS-вычислений высоты → лучше один раз задать фиксированное значение –btn03h, если дизайн допускает
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!