Инструкция
Скрипт автоматически будет скрывать и показывать картинки поочерёдно, создавая эффект кадровой анимации. Это решение поможет реализовать анимацию быстрее и проще, чем настраивать её вручную с помощью редактора Step‑by‑Step.
1. Создайте два объекта в Zero Block. Разместите их так, чтобы они находились в одинаковых координатах по X и Y.
2. Присвойте им CSS‑классы: первому — uc-step1, второму — uc-step2. Чтобы это сделать, кликните по объекту левой кнопкой мыши и в открывшемся меню выберите «Add CSS Class Name».
3. Добавьте HTML‑блок T123 и вставьте в него приведенный ниже код. После этого сохраните и опубликуйте страницу.
2. Присвойте им CSS‑классы: первому — uc-step1, второму — uc-step2. Чтобы это сделать, кликните по объекту левой кнопкой мыши и в открывшемся меню выберите «Add CSS Class Name».
3. Добавьте HTML‑блок T123 и вставьте в него приведенный ниже код. После этого сохраните и опубликуйте страницу.
При желании вы можете настроить для этих элементов анимацию Step‑by‑Step — например, добавить смещение в любую сторону. Объекты будут двигаться, а скрипт будет переключать между двумя изображениями.
На одной странице можно разместить сколько угодно таких пар изображений. Модификация будет корректно работать со всеми элементами, имеющими CSS‑классы uc-step1 и uc-step2.
При необходимости вы можете расширить функционал: добавьте в код поддержку дополнительных изображений — например, с классами uc-step3, uc-step4 и так далее.
<!-- Скрипт для переключения между двумя и более изображениями Tilda с сайта bulgkate.ru -->
<script>
const step1 = document.querySelector('.uc-step1');
const step2 = document.querySelector('.uc-step2');
let isStep1Visible = true;
setInterval(() => {
if (isStep1Visible) {
step1.style.opacity = '0';
step1.style.zIndex = '100';
step2.style.opacity = '1';
step2.style.zIndex = '200';
} else {
step1.style.opacity = '1';
step1.style.zIndex = '200';
step2.style.opacity = '0';
step2.style.zIndex = '100';
}
isStep1Visible = !isStep1Visible;
}, 400);
</script>
<style>
.uc-step1,
.uc-step2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
pointer-events: none;
}
.uc-step1 {
opacity: 1;
z-index: 200;
}
.uc-step2 {
opacity: 0;
z-index: 100;
}
</style>
