URL скопирован в буфер обмена!

Как добавить Flash эффект для кнопки в Zero Block на Tilda

При помощи данной модификации можно добавить флеш анимацию для кнопок в зеро блок. На выбор доступно 3 эффекта (Flash, Light и Ripple)

Модификация обновлена. Исправлена ошибка блокировки скрола страницы после отправки формы.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block

Генератор кода

Класс кнопки
Тип эффекта
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD088--><script> $(document).ready(function() { $(".tc-flashbtn .tn-atom").addClass("TCDbtnzone").append('<div class="TIeffect"></div>'); }); </script> <style> .TCDbtnzone { overflow: hidden; position: relative; } .TIeffect { position: absolute; top: 0; left: -100%; width: 75px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-45deg); overflow: hidden !important; animation: TCanimationkey 5s ease-out infinite; } @keyframes TCanimationkey { 0% { left: -100%; } 25% { left: 130%; } 50% { left: 130%; } 75% { left: 130%; } 100% { left: 130%; } } </style>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block кнопку и указываем ей класс tc-flashbtn
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. При необходимости можно выбрать другой тип анимации в генераторе.

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

Примечание: Если на одной странице нужно сделать несколько кнопок с разным типом анимаций, то указываем для каждого типа анимации уникальный класс в генераторе. Например, для кнопки с falsh указываем tc-flashbtn, а для кнопки с анимацией ripple - tc-flashbtn2
Made on
Tilda