Эффекты анимации для кнопок в Тильде
Нажмите на кнопку, эффект, которой вы хотите, чтобы открылся код, копируем его.
Авто блик1
Код:
<script>
function button1() {
/* https://vakas.ru/tilda/effekty-animacii-dlia-knopok-v-tilde/ */
$('.t-btn').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
$('.t-submit').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
$('.mybutton').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
$('div[data-elem-type="button"] .tn-atom').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
}
setTimeout(button1, 1000);
setTimeout(button1, 3000);
</script>
<style>
.autoink{
position: relative;
overflow: hidden;
}
.ink{
display: block;
position: absolute;
background: rgba(255, 255, 255, 1.0);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
z-index: 20;
}
.animate {
webkit-animation: ripple 4s linear infinite;
-moz-animation: ripple 4s linear infinite;
-ms-animation: ripple 4s linear infinite;
-o-animation: ripple 4s linear infinite;
animation: ripple 4s linear infinite;
}
@keyframes ripple {
20% {
opacity: 0;
transform: scale(2.5);
}
100% {
opacity: 0;
transform: scale(2.5);
}
}
</style>
Авто блик2
Код:
<script>
/* https://vakas.ru/tilda/effekty-animacii-dlia-knopok-v-tilde/ */
$('.t-btn').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.t-submit').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.mybutton').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('div[data-elem-type="button"] .tn-atom').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
</script>
<style>
.autoflash{
position: relative;
overflow: hidden;
}
.flash{
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.lighting {
webkit-animation: moving 3s ease-in-out infinite;
-moz-animation: moving 3s ease-in-out infinite;
-ms-animation: moving 3s ease-in-out infinite;
-o-animation: moving 3s ease-in-out infinite;
animation: moving 3s ease-in-out infinite;
}
@keyframes moving {
30% { webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}
100% { webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}
}
</style>
Как добавить эффект к кнопкам
На страницу Тильды добавляем новый блок "HTML-код"
В html-код вставляем код кнопки, который находится выше.
В большинстве случаев этого должно хватить, если не сработало нужно найти css клаcc вашей кнопки или id кнопки, и заменить в коде это значение. В коде класс кнопки прописан в скобках, после знака доллар ($), пример $('.t-btn').
Всё, эффекты работают!
Для тех, кому нужен технический специалист, наши услуги:
Эффект для кнопок на Тильде - 300 рублей Интеграция Тильды с Бизоном - 2000 рублей 1000 рублей )Интеграция Тильды с Бизоном, одна форма на страницу - 500 рублей
Чистка контактов в бизоне (удаление оплативших, для рассылки акций) - 500 рублей
Верстка страниц (стандартного набора: вебинар, спасибо, спецпредложение) - 7000 рублей
Интеграция с amoCRM - от 2000 рублей
Пишите или звоните в +7 905 83 45 478
Или в https://vk.com/vakas
P.S.
Такие формы кстати тоже можем помочь настроить ;)
