Как легко сделать покадровую анимацию кодом в Tilda

2025-11-03 16:03 Бесплатные Zero Block

Инструкция

Скрипт автоматически будет скрывать и показывать картинки поочерёдно, создавая эффект кадровой анимации. Это решение поможет реализовать анимацию быстрее и проще, чем настраивать её вручную с помощью редактора Step‑by‑Step.

1. Создайте два объекта в Zero Block. Разместите их так, чтобы они находились в одинаковых координатах по X и Y.
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>