URL скопирован в буфер обмена!
Как сделать 3D анимацию переворота карточек в Zero Block на Tilda?
Эта модификация добавляет 3D эффект (Flip Card) переворота карточек в Zero Block. Можно настроить скорость анимации, включить пошатывание и небольшое подпрыгивание в момент переворота, чтобы усилить эффект. Кнопки внутри карточек остаются полностью кликабельными.
Модификация работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
Класс для лицевой стороны
Класс для тыльной стороны
Скорость переворота
Наклон карточки при наведении
Покачивание после переворота
Только одна активная карточка
Подбрасывание при перевороте
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD135--><style>
[class*="ti-cardfront"],[class*="ti-cardback"]{
transform-style:preserve-3d;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
cursor:pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const tcdmire = 1200;
const ticodeslow = 0.7;
const tildatcglue = "power2.inOut";
const tcvane = 10;
const ticodezest = 28;
const tcdwisp = 0.46;
const tcdecho = window.matchMedia && window.matchMedia("(hover:hover) and (pointer:fine)").matches;
function ticodeknot(tcdcall){
if (typeof gsap !== "undefined") return tcdcall();
const tcdrune = document.createElement("script");
tcdrune.src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js";
tcdrune.onload = tcdcall;
document.head.appendChild(tcdrune);
}
const tildatcjar = [];
let ticodeveil = null;
function tcdmoss(tcevt){
const tcdtap = tcevt && tcevt.target ? tcevt.target : null;
if(!tcdtap || !tcdtap.closest) return false;
if(tcdtap.closest('[data-no-flip="1"]')) return true;
if(tcdtap.closest('a,button,input,select,textarea,label')) return true;
if(tcdtap.closest('[contenteditable=""],[contenteditable="true"]')) return true;
return false;
}
function tildatcforge(tcfront, tcback, tiwob){
const tcdstage = tcfront.closest(".t396__artboard") || tcfront.parentElement;
if(tcdstage){
tcdstage.style.perspective = tcdmire + "px";
tcdstage.style.transformStyle = "preserve-3d";
}
gsap.set([tcfront, tcback], { transformStyle:"preserve-3d", backfaceVisibility:"hidden", force3D:true });
gsap.set(tcfront, { rotationY:0, transformOrigin:"50% 50%" });
gsap.set(tcback, { rotationY:-180, transformOrigin:"50% 50%" });
tcback.style.pointerEvents = "none";
let tcdflip = false;
let tianim = false;
let tcpending = false;
function tcdsplay(){
return { tcfront: tcdflip ? 180 : 0, tcback: tcdflip ? 0 : -180 };
}
function tildatcveilcut(){
const tcdang = tcdsplay();
gsap.killTweensOf([tcfront, tcback]);
gsap.set(tcfront, { rotationY: tcdang.tcfront });
gsap.set(tcback, { rotationY: tcdang.tcback });
}
function ticodeglint(tcdelta){
const tcdang = tcdsplay();
gsap.killTweensOf([tcfront, tcback]);
gsap.to(tcfront, { duration:0.18, rotationY: tcdang.tcfront + tcdelta, ease:"power2.out" });
gsap.to(tcback, { duration:0.18, rotationY: tcdang.tcback + tcdelta, ease:"power2.out" });
}
const tcdhush = 0;
const ticodepurr = 0;
function tcdruffle(tiendfront, tiendback){
if(!tiwob || !ticodepurr) return;
const tcdpull = tcdflip ? -10 : 10;
const tcw = 0.12;
gsap.to(tcfront,{duration:tcw,rotationY:tiendfront+tcdpull,ease:"sine.out"});
gsap.to(tcback ,{duration:tcw,rotationY:tiendback +tcdpull,ease:"sine.out"});
gsap.to(tcfront,{duration:tcw,rotationY:tiendfront - tcdpull*0.55,delay:tcw,ease:"sine.inOut"});
gsap.to(tcback ,{duration:tcw,rotationY:tiendback - tcdpull*0.55,delay:tcw,ease:"sine.inOut"});
gsap.to(tcfront,{duration:tcw,rotationY:tiendfront + tcdpull*0.30,delay:tcw*2,ease:"sine.inOut"});
gsap.to(tcback ,{duration:tcw,rotationY:tiendback + tcdpull*0.30,delay:tcw*2,ease:"sine.inOut"});
gsap.to(tcfront,{duration:0.10,rotationY:tiendfront,delay:tcw*3,ease:"sine.out"});
gsap.to(tcback ,{duration:0.10,rotationY:tiendback ,delay:tcw*3,ease:"sine.out"});
}
const tildatcone = 0;
function tcdunlock(){
tianim = false;
if(tildatcone && tcdflip && ticodeveil && ticodeveil !== ticodeapi){
tcpending = false;
tcturn(false, true);
return;
}
if(tcpending){
tcpending = false;
tcturn(false, true);
}
}
function tcdclamp(tct){
tianim = true;
gsap.delayedCall(tct, tcdunlock);
}
const ticodedepth = 0;
function tcturn(tcnext, tcforce){
if(!tcforce && tianim) return;
if(tcdhush && tcdecho) tildatcveilcut();
if(tildatcone){
if(tcnext){
ticodeveil = ticodeapi;
tildatcjar.forEach(function(tiinst){
if(tiinst !== ticodeapi) tiinst.ticodeshut();
});
} else {
if(ticodeveil === ticodeapi) ticodeveil = null;
}
}
tcdflip = !!tcnext;
tcback.style.pointerEvents = tcdflip ? "auto" : "none";
tcfront.style.pointerEvents = tcdflip ? "none" : "auto";
const tcto = tcdflip ? 180 : 0;
const tibto = tcdflip ? 0 : -180;
gsap.killTweensOf([tcfront, tcback]);
const tclock = ticodeslow + ((ticodepurr && tiwob) ? tcdwisp : 0) + (ticodedepth ? 0.05 : 0);
tcdclamp(tclock);
if(ticodedepth){
const tctimeline = gsap.timeline();
tctimeline.to([tcfront,tcback], { duration:ticodeslow/2, z:ticodezest, ease:"power1.out" }, 0);
tctimeline.to([tcfront,tcback], { duration:ticodeslow/2, z:0, ease:"power1.in" }, ticodeslow/2);
tctimeline.to(tcfront, { duration:ticodeslow, rotationY:tcto, ease:tildatcglue }, 0);
tctimeline.to(tcback, { duration:ticodeslow, rotationY:tibto, ease:tildatcglue }, 0);
tctimeline.call(function(){ tcdruffle(tcto, tibto); }, null, ticodeslow);
} else {
gsap.to(tcfront,{duration:ticodeslow,rotationY:tcto,ease:tildatcglue});
gsap.to(tcback ,{duration:ticodeslow,rotationY:tibto,ease:tildatcglue});
gsap.delayedCall(ticodeslow, function(){ tcdruffle(tcto, tibto); });
}
}
function tiswitch(){ tcturn(!tcdflip, false); }
function ticodeshut(){
if(!tcdflip){ tcpending=false; return; }
if(tianim){ tcpending = true; return; }
tcturn(false, true);
}
function tcdtap(e){
if(tcdmoss(e)) return;
tiswitch();
}
tcfront.addEventListener("click", tcdtap);
tcback .addEventListener("click", tcdtap);
if(tcdhush && tcdecho){
const tcoverin = function(){ if(!tianim) ticodeglint(tcvane); };
const tcoverout = function(){ if(!tianim) ticodeglint(0); };
tcfront.addEventListener("mouseenter", tcoverin);
tcfront.addEventListener("mouseleave", tcoverout);
tcback .addEventListener("mouseenter", tcoverin);
tcback .addEventListener("mouseleave", tcoverout);
}
const ticodeapi = {
get tcdpeek(){ return tcdflip; },
tcdswap: tiswitch,
tcfront: function(){ tcturn(false, false); },
tcback: function(){ tcturn(true, false); },
ticodeshut: ticodeshut
};
tildatcjar.push(ticodeapi);
return ticodeapi;
}
ticodeknot(function(){
const tcscan = Array.from(document.querySelectorAll('[class*="ti-cardfront"],[class*="ti-cardback"]'));
const tcdnums = new Set();
tcscan.forEach(function(tiel){
tiel.classList.forEach(function(tccls){
let tcm = tccls.match(/^ti-cardfront(\d+)$/); if(tcm) tcdnums.add(tcm[1]);
tcm = tccls.match(/^ti-cardback(\d+)$/); if(tcm) tcdnums.add(tcm[1]);
});
});
tcdnums.forEach(function(tin){
const tcfront = document.querySelector(".ti-cardfront"+tin);
const tcback = document.querySelector(".ti-cardback"+tin);
if(tcfront && tcback) tildatcforge(tcfront, tcback, true);
});
});
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. В Zero Block создаем группу элементов, затем в настройках группы выбери тип «Объект» и задай класс ti-cardfront1.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Внутри этой группы размещаем все что должно быть видно на лицевой стороне карточки (например, шейп + текст)
Важно: сначала объединяем элементы в группу, потом переключаем тип группы на «Объект», и только после этого указываем класс.
2. Создай вторую группу для обратной стороны. Указываем группе класс ti-cardback1 и размещаем внутри элементы, которые должны показываться после переворота.
Если нужно несколько карточек, то дублируем пары групп и указываем классы:
лицевая сторона: ti-cardfront2, ti-cardfront3 и т.д.
обратная сторона: ti-cardback2, ti-cardback3 и т.д.
3. Размещаем эти две группы друг под другом (лицевая группа в слоях выше тыльной).
4. Указываем дополнительные настройки в генераторе:
Скорость переворота — указываем длительность анимации в секундах. Оптимально 0.3–1.0.
Наклон при наведении — если включено, на десктопах карточка будет слегка наклоняться при наведении курсора.
Покачивание после переворота — добавляет лёгкую инерцию после переворота.
Только одна активная карточка — если включено, то при перевороте новой карточки предыдущая автоматически возвращается обратно. Только одна карточка может быть перевернутой.
Подбрасывание при перевороте — карточка слегка приподнимается во время переворота, создавая эффект глубины.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с карточками.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Внутри этой группы размещаем все что должно быть видно на лицевой стороне карточки (например, шейп + текст)
Важно: сначала объединяем элементы в группу, потом переключаем тип группы на «Объект», и только после этого указываем класс.
2. Создай вторую группу для обратной стороны. Указываем группе класс ti-cardback1 и размещаем внутри элементы, которые должны показываться после переворота.
Если нужно несколько карточек, то дублируем пары групп и указываем классы:
лицевая сторона: ti-cardfront2, ti-cardfront3 и т.д.
обратная сторона: ti-cardback2, ti-cardback3 и т.д.
3. Размещаем эти две группы друг под другом (лицевая группа в слоях выше тыльной).
4. Указываем дополнительные настройки в генераторе:
Скорость переворота — указываем длительность анимации в секундах. Оптимально 0.3–1.0.
Наклон при наведении — если включено, на десктопах карточка будет слегка наклоняться при наведении курсора.
Покачивание после переворота — добавляет лёгкую инерцию после переворота.
Только одна активная карточка — если включено, то при перевороте новой карточки предыдущая автоматически возвращается обратно. Только одна карточка может быть перевернутой.
Подбрасывание при перевороте — карточка слегка приподнимается во время переворота, создавая эффект глубины.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с карточками.
