Модификации

Как сделать анимированную первую карточку в блоках TE900 Tilda

2025-11-03 18:52 Слайдеры

Инструкция

С помощью этой модификации вы сделаете первую карточку в любом из стандартных блоков серии TE900 (включая TE900A, TE900B, TE900C, TE900D и TE900E) анимированной: её изображение будет мягко покачиваться из стороны в сторону.
1. Добавьте на страницу нужный блок из серии TE900 (A — E).
2. Присвойте ему CSS‑класс uc-cards: пролистайте настройки блока до самого низа и нажмите кнопку «Add CSS Class Name», затем введите uc-cards.
3. Добавьте HTML‑блок T123, поместите в него приведенный ниже код и сохраните изменения.
Важно! Отключите Lazy Load для изображений в настройках проекта, чтобы модификация работала корректно.
В самом скрипте вы можете легко изменить:
  • амплитуду покачивания (угол поворота),
  • скорость и плавность движения,
  • а также размер зоны анимации — под ваш дизайн.
<!-- Скрипт для создания анимированной первой карточки в блоках TE900 Tilda с сайта bulgkate.ru -->
<style>
.uc-cards .t1196__item:first-child {
    background-color: transparent !important;
    background-size: 80% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    margin: 0 auto;
    border: none !important;
    box-shadow: none !important;
  }

  @keyframes uc-tilt-sway {
    0%   { transform: rotate(-2deg); }
    50%  { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
  }

  .uc-bg-animated {
    animation: uc-tilt-sway 4.5s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
  }

  @media screen and (max-width: 640px) {
    .uc-cards .t1196__item:first-child {
      width: 150px !important;
      height: 150px !important;
      flex: 0 0 150px !important;
      overflow: hidden;
      position: relative;
      background-size: cover !important;
      background-position: center bottom !important;
      background-repeat: no-repeat !important;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const cardContainers = document.querySelectorAll('.uc-cards');

    cardContainers.forEach(container => {
      const firstItem = container.querySelector('.t1196__item');
      if (!firstItem) return;

      const bgEl = firstItem.querySelector('.t1196__bgimg_first');
      if (!bgEl) return;

      const bgUrl = bgEl.style.backgroundImage;
      if (!bgUrl) return;

      firstItem.style.backgroundImage = bgUrl;
      firstItem.style.backgroundSize = 'cover';
      firstItem.style.backgroundPosition = 'center';
      firstItem.style.backgroundRepeat = 'no-repeat';

      const imgWrapper = firstItem.querySelector('.t1196__imgwrapper');
      if (imgWrapper) imgWrapper.style.display = 'none';

      firstItem.classList.add('uc-bg-animated');
    });
  });
</script>