+38(063) 178 64 56
Works
Agency
Services
Price
Contacts
digital agency
Articles
Как анимировать бордер у shape в Tilda?
Значения, которые были введены
1. Добавляешь в Зеро-блок шейп, к которому необходимо добавить анимацию. И указываешь ему тот же class, что и в генераторе (например, animNolimBorder).

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

2. В генераторе настраиваешь параметры эффекта:
  • «Class шейпа» – Который указываешь в Зеро-блоке (например, animNolimBorder);
  • «Ширина бордера»;
  • «Цвет бордера»;
  • «Тип цвета»;
  • «Цвет 1 (элемента анимации)»;
  • «Цвет 2 (элемента анимации)»;
  • «Направления анимации»;
  • «Длительность анимации (в секундах)»;

3. Параметры эффекта при наведении:
  • «Цвет фона»;
  • «Цвет бордера»;
  • «Цвет 1 (элемента анимации)»;
  • «Цвет 2 (элемента анимации)»;

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

Имей в виду:

  • Не стабильно работает с sbs анимацией;
  • Шейп обязательно должен быть цветным (не прозрачным)
Як на картинке
<!--NOLIM--><!--NLM067--><!--settings{"shapeClass":"animNolimBorder","borderSize":"1px","borderColor":"#a9c7fe","colorType":"1","colorOne":"","colorTwo":"#798aa9","animationDirection":"0","animationDuration":"2s","onHoverBgColor":"#fe3e3e","onHoverBorderColor":"#950e0e","onHoverColorOne":"#f7b440","onHoverColorTwo":"#44c1be"}settingsend--><!--ts1741861628938ts--> <style> .animNolimBorder { overflow: hidden; } .animNolimBorder[data-animate-prx="mouse"], .animNolimBorder[data-animate-prx="scroll"], .animNolimBorder[data-animate-sbs-event="scroll"]{ overflow: hidden; } .animNolimBorder[data-animate-prx="mouse"] .tn-atom__prx-wrapper, .animNolimBorder[data-animate-prx="scroll"] .tn-atom__prx-wrapper{ transform: translate3d(0px, 0px, 0px); } .animNolimBorder .tn-atom__prx-wrapper, .animNolimBorder .tn-atom__sbs-anim-wrapper, .animNolimBorder .tn-atom__sticky-wrapper{ overflow: hidden; } @supports (-moz-appearance:none) and (mask-type:alpha) { .animNolimBorder.t-sbs-anim_started>.tn-atom__sbs-anim-wrapper { display: flex !important; } .animNolimBorder, .animNolimBorder .tn-atom__prx-wrapper, .animNolimBorder .tn-atom__sticky-wrapper, .animNolimBorder .tn-atom__sbs-anim-wrapper{ display: flex!important; } } @media screen and (min-width: 1200px) { .t396 .animNolimBorder.t-sbs-anim_started { overflow: hidden; } } @media screen and (max-width: 1200px) { .animNolimBorder.t-sbs-anim_started { overflow: hidden; } .animNolimBorder.t-sbs-anim_started[data-animate-mobile="y"] { overflow: hidden; } } .animNolimBorder.t-sbs-anim_started>.tn-atom__sbs-anim-wrapper { overflow: hidden; border-radius: inherit; } .animNolimBorder .tn-atom::before { content: ''; position: absolute; animation: animate 2s linear reverse infinite; overflow: hidden; } .animNolimBorder .tn-atom__sbs-anim-wrapper{ border-radius: inherit!important; } .animNolimBorder .tn-atom__sbs-anim-wrapper:hover{ border-radius: inherit!important; } .animNolimBorder .tn-atom::after { content: ''; position: absolute !important; inset: 1px; } .notSupportInset::after { top: 1px; right: 1px; bottom: 1px; left: 1px; } .zindexForIos::before { z-index: -9999; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <script> $(document).ready(function() { var elemCount = 0; setTimeout(function() { var style = document.createElement('style'); style.innerHTML = '@media screen and (min-width: 1200px) {.animNolimBorder .tn-atom:hover {background: #950e0e !important;}.animNolimBorder .tn-atom:hover::after {background: #fe3e3e;}}}'; document.body.appendChild(style); }, 500); var tn = setInterval(function() { if ($('.animNolimBorder .tn-atom').length > 0) { clearInterval(tn); let int = setInterval(function() { let shapeList = document.querySelectorAll(".animNolimBorder"); shapeList.forEach(function(item) { if (item.getAttribute("data-animate-prx") == "mouse" || item.getAttribute("data-animate-prx") == "scroll" || item.getAttribute("data-animate-sbs-event") == "scroll" || item.querySelector(".tn-atom__prx-wrapper") || item.querySelector(".tn-atom__sbs-anim-wrapper") || item.querySelector(".tn-atom__sticky-wrapper")) { item.style.overflow = "visible"; } }); }, 0); setTimeout(function() { clearInterval(int); }, 1000); $('.animNolimBorder .tn-atom').each(function(index, element) { elemCount += 1; element.closest(".animNolimBorder").setAttribute('nl-anim-border', `${elemCount}`); var bC = $(element).css('background-color'); if($(element).css('background-image') !== 'none') { var backgroundImage = $(element).css('background-image'); } console.log('bC',bC); var bR = $(element).css('borderTopLeftRadius'); bR = bR.replace('px', ''); bR = Number(bR); var typeClr = 1; var insetJS = 1; var bRafter = bR - insetJS; $(element).after(` <style> .animNolimBorder[nl-anim-border="${elemCount}"]{ border-radius: ${bR}px; } .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom{ background-color: #a9c7fe !important; background-image: url() !important; } .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom::after{ background: ${bC}; border-radius: ${bRafter}px; background-image: ${backgroundImage}; background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> `); var sizeH = $(element).parents('.animNolimBorder').css('height'); var sizeW = $(element).parents('.animNolimBorder').css('width'); sizeH = sizeH.replace('px', ''); sizeH = Number(sizeH); sizeW = sizeW.replace('px', ''); sizeW = Number(sizeW); var leftSizeH = Number(sizeH / 4); var leftSizeW = Number(sizeW / 4); sumWH = sizeW - sizeH; if (sumWH > 0 && typeClr == 1) { sizeH = Number(sizeH / 2); $(element).parents('.animNolimBorder').after(` <style> .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom::before{ width: 300% !important; height: ${sizeH}px !important; top: ${leftSizeH}px; left: -100%; background: linear-gradient(, #798aa9); } @media screen and (min-width: 1200px){ .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom:hover::before{ background: linear-gradient(#f7b440, #44c1be); } } </style>`); } else if (sumWH > 0 && typeClr == 2) { sizeH = Number(sizeH / 2); $(element).after(` <style> .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom::before{ width: 300% !important; height: ${sizeH}px !important; top: ${leftSizeH}px; left: -100%; background: linear-gradient(90deg, 50%, #798aa9 50%); } @media screen and (min-width: 1200px){ .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom:hover::before{ background: linear-gradient(90deg, #f7b440 50%, #44c1be 50%); } } </style>`); } else if (sumWH <= 0 && typeClr == 1) { sizeW = Number(sizeW / 2); $(element).after(` <style> .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom::before{ height: 160% !important; width: ${sizeW}px !important; top: 0; bottom: 0; margin: auto; left: ${leftSizeW}px; background: linear-gradient(90deg, , #798aa9); } @media screen and (min-width: 1200px){ .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom:hover::before{ background: linear-gradient(90deg, #f7b440, #44c1be); } } </style> `); } else if (sumWH <= 0 && typeClr == 2) { sizeW = Number(sizeW / 2); $(element).after(` <style> .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom::before{ height: 160% !important; width: ${sizeW}px !important; top: 0; bottom: 0; margin: auto; left: ${leftSizeW}px; background: linear-gradient(, #798aa9); } @media screen and (min-width: 1200px){ .animNolimBorder[nl-anim-border="${elemCount}"] .tn-atom:hover::before{ background: linear-gradient(#f7b440, #44c1be); } } </style> `); } }); let int2 = setInterval(function() { var targetList = document.querySelectorAll(".animNolimBorder .tn-atom__sbs-anim-wrapper"); if (targetList.length > 0) { clearInterval(int2); targetList.forEach(function(item) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutationRecord) { item.style.willChange = ""; }); }); observer.observe(item, { attributes: true, attributeFilter: ['style'] }); }); } }, 0); if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) { $('.animNolimBorder .tn-atom').addClass("notSupportInset"); $('.animNolimBorder .tn-atom').addClass("zindexForIos"); } if (navigator.userAgent.match(/UCBrowser/i)) { $('.animNolimBorder .tn-atom').addClass("notSupportInset"); } var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isFirefox = typeof InstallTrigger !== 'undefined'; if(isOpera || isFirefox){ let zm = $('.animNolimBorder .tn-atom__scale-wrapper').css('transform'); $('.animNolimBorder').css('transform', zm); $('.animNolimBorder .tn-atom__scale-wrapper').css('transform', 'unset'); } $(window).resize(function() { setTimeout(function() { if(isOpera || isFirefox){ let zm = $('.animNolimBorder .tn-atom__scale-wrapper').css('transform'); $('.animNolimBorder').css('transform', zm); $('.animNolimBorder .tn-atom__scale-wrapper').css('transform', 'unset'); } }, 500); }); } }, 100); }); </script>