URL скопирован в буфер обмена!
Как сделать табы внутри одного Zero Block?
При помощи данной модификации можно сделать переключение контента в рамках одного Zero Block. Контент переключается при помощи кнопок (табов) с возможностью стилизовать активную кнопку.
Модификация обновлена. Добавлена возможность переключать табы при помощи стрелок left и right. Обновлена инструкция
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс для кнопок
Класс для контента
Цвет фона активной кнопки
Цвет текста активной кнопки
Цвет обводки активной кнопки
Класс для стрелки right
Класс для стрелки left
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD045--><style>
.hidden {
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
position: absolute;
bottom: -5000px;
}
[class*="ti-tab-"] .tn-atom {
cursor: pointer;
}
.TC-Active-ti-content .tn-atom {
background-color: #FA897B !important;
color: #ffffff !important;
border-color: !important;
}
.ti-right, .ti-left {
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var TiCodeZeroTabs = document.querySelectorAll('[class*="ti-tab-"]');
var TiCodeContents = document.querySelectorAll('[class*="ti-content-"]');
var currentIndex = 0;
for (var t = 1; t < TiCodeContents.length; t++) {
TiCodeContents[t].classList.add('hidden');
}
var FirstTcTabs = document.querySelectorAll('.ti-tab-1');
var FirstTcContents = document.querySelectorAll('.ti-content-1');
if (FirstTcTabs.length > 0 && FirstTcContents.length > 0) {
FirstTcTabs.forEach(function (tab) {
tab.classList.add('TC-Active-ti-content');
});
FirstTcContents.forEach(function (content) {
content.classList.remove('hidden');
});
}
TiCodeZeroTabs.forEach(function (tab) {
tab.addEventListener('click', function (e) {
e.preventDefault();
var TiCodeTabClass = tab.className;
var TiCodeNumber = TiCodeTabClass.match(/ti-tab-(\d+)/)[1];
TiCodeContents.forEach(function (content) {
content.classList.add('hidden');
});
var TiCodeTarget = document.querySelectorAll('.ti-content-' + TiCodeNumber);
if (TiCodeTarget.length > 0) {
TiCodeTarget.forEach(function (content) {
content.classList.remove('hidden');
});
setTimeout(function () {
t_lazyload_update();
}, 200);
}
TiCodeZeroTabs.forEach(function (tab) {
tab.classList.remove('TC-Active-ti-content');
});
TiCodeTabs = document.querySelectorAll('.ti-tab-' + TiCodeNumber);
TiCodeTabs.forEach(function (tab) {
tab.classList.add('TC-Active-ti-content');
});
});
});
function showSlide(index) {
TiCodeContents.forEach(function (content) {
content.classList.add('hidden');
});
TiCodeZeroTabs.forEach(function (tab) {
tab.classList.remove('TC-Active-ti-content');
});
var targetTabs = document.querySelectorAll('.ti-tab-' + (index + 1));
var targetContents = document.querySelectorAll('.ti-content-' + (index + 1));
targetTabs.forEach(function (tab) {
tab.classList.add('TC-Active-ti-content');
});
targetContents.forEach(function (content) {
content.classList.remove('hidden');
});
}
var rightButtons = document.querySelectorAll('.ti-right');
var leftButtons = document.querySelectorAll('.ti-left');
rightButtons.forEach(function (button) {
button.addEventListener('click', function () {
let nextIndex = (currentIndex + 1) % TiCodeContents.length;
while (!document.querySelector('.ti-content-' + (nextIndex + 1)) && nextIndex !== currentIndex) {
nextIndex = (nextIndex + 1) % TiCodeContents.length;
}
if (nextIndex === currentIndex) return;
currentIndex = nextIndex;
showSlide(currentIndex);
});
});
leftButtons.forEach(function (button) {
button.addEventListener('click', function () {
let prevIndex = (currentIndex - 1 + TiCodeContents.length) % TiCodeContents.length;
while (!document.querySelector('.ti-content-' + (prevIndex + 1)) && prevIndex !== currentIndex) {
prevIndex = (prevIndex - 1 + TiCodeContents.length) % TiCodeContents.length;
}
if (prevIndex === currentIndex) return;
currentIndex = prevIndex;
showSlide(currentIndex);
});
});
});
</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>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block и добавляем в него кнопки которые будут служить переключателями контента. Кнопкам назначаем класс из генератора ti-tab-(номер вкладки за который отвечает кнопка). Например для первой кнопки класс ti-tab-1, для второй ti-tab-2 и т. д.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Важно! При смене класса кнопок и контента в генераторе, учитывайте что новые классы обязательно должны состоять из двух частей через дефис. Например: b-test, btn-class
2. Добавляем слоями контент (текст, кнопки, шейпы, картинки т. д.) и назначаем контенту класс ti-content-(номер вкладки). Например для всего контента который должен показывать при клике на первую кнопку назначаем класс ti-content-1, контент для второй кнопки ti-content-2 и т. д. Контент разных вкладок можно размещать в Zero Block друг под другом слоями.
Важно! контент ti-content-1 должен быть в самом нижнем слое, в следующем слое контент ti-content-2 и т. д.
3. При необходимости можно добавить стрелки для пролистывания табов. Для это в зеро блоке создаем две кнопки (можно также использовать текст, картинку или шейп) и присваиваем им классы:
ti-right - для пролистывания вправо
ti-left - для пролистывания влево
4. При необходимости, указываем в генераторе кода настройки для активной кнопки Цвет фона, Цвет текста и Цвет обводки.
5. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! В Zero Block есть лимит по контенту (около 300 элементов. подробнее ознакомиться с лимитами Тильда можно в этой статье). Учитывайте это если делаете много табов с большим количеством элементов в рамках одного Zero Block. Для такой задачи стоит использовать слайдер который переключает Zero Block
Модификация плохо работает с галереей Zero Block(если вы загнали элемент галерею в качестве контента для вкладок, то при переключении галерея будет пустая до первого клика по стрелке пролистывания). Проблема частично решается установкой в галерее автопролистывания. Укажите пролистывание, например, 5 секунд
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Важно! При смене класса кнопок и контента в генераторе, учитывайте что новые классы обязательно должны состоять из двух частей через дефис. Например: b-test, btn-class
2. Добавляем слоями контент (текст, кнопки, шейпы, картинки т. д.) и назначаем контенту класс ti-content-(номер вкладки). Например для всего контента который должен показывать при клике на первую кнопку назначаем класс ti-content-1, контент для второй кнопки ti-content-2 и т. д. Контент разных вкладок можно размещать в Zero Block друг под другом слоями.
Важно! контент ti-content-1 должен быть в самом нижнем слое, в следующем слое контент ti-content-2 и т. д.
3. При необходимости можно добавить стрелки для пролистывания табов. Для это в зеро блоке создаем две кнопки (можно также использовать текст, картинку или шейп) и присваиваем им классы:
ti-right - для пролистывания вправо
ti-left - для пролистывания влево
4. При необходимости, указываем в генераторе кода настройки для активной кнопки Цвет фона, Цвет текста и Цвет обводки.
5. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! В Zero Block есть лимит по контенту (около 300 элементов. подробнее ознакомиться с лимитами Тильда можно в этой статье). Учитывайте это если делаете много табов с большим количеством элементов в рамках одного Zero Block. Для такой задачи стоит использовать слайдер который переключает Zero Block
Модификация плохо работает с галереей Zero Block(если вы загнали элемент галерею в качестве контента для вкладок, то при переключении галерея будет пустая до первого клика по стрелке пролистывания). Проблема частично решается установкой в галерее автопролистывания. Укажите пролистывание, например, 5 секунд
Базовые параметры для анимации
01
Краткая история моушн дизайна. Обзор Adobe After Effects.
Тайминг, спейсинг, изинги
02
Простая абстрактная композиция. Зацикленная анимация с помощью слоев в Adobe After Effects.
Ритм
03
Учим шейпы танцевать.
Follow through&overlapping action, parenting, effects
04
Движение объектов по арочным траекториям.
Маски, глитч, несколько сцен
01
Анимация с использованием градиентов и масок.
Интерфейсная анимация
02
Основы анимации веб-элементов.
Простая анимация персонажа
03
Создаем зацикленное шествие персонажа и анимируем бэкграунд.
Монтаж шоурила
04
Рассматриваем алгоритм сборки и работу с музыкой, формируем собственное портфолио из работ, проделанных на курсе.
IN/OUT animation
01
Анимация логотипов.
Вес, масса, объем
02
Простой риггинг.
Морфинг
03
Абстрактная анимация.
Работа с камерой
04
3D в After Effects.
