5 скрытых возможностей Zero-блока, о которых вы не знали

Zero-блок в Тильде — мощный инструмент. Но большинство используют его на 20% возможностей: двигают элементы, настраивают адаптив и на этом останавливаются. Между тем, скрытые возможности Zero-блока позволяют делать вещи, которые не описаны в официальной документации Tilda.

Ниже — 5 приёмов с примерами CSS и JS кода. Каждый проверен на реальных проектах.

1. Анимация элементов по скроллу через CSS и JS

Встроенная пошаговая анимация Zero-блока ограничена: fade in, zoom in, сдвиг. Для более сложных сценариев — например, плавного появления с поворотом или каскадного эффекта — используем Intersection Observer API.

Добавьте класс .zb-anim нужным элементам через поле «CSS Class Name» в настройках элемента Zero-блока. Затем вставьте код в блок T123 (HTML-код):

<style>
  .zb-anim {
    opacity: 0;
    transform: translateY(40px) rotate(2deg);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .zb-anim.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        setTimeout(() => {
          entry.target.classList.add('is-visible');
        }, index * 150);
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.2 });

  document.querySelectorAll('.zb-anim').forEach(el => observer.observe(el));
});
</script>

Результат: элементы появляются каскадом с лёгким поворотом при скролле. Задержку между элементами регулируйте через значение index * 150.

2. Псевдоэлементы через CSS — декор без лишних слоёв

В Zero-блоке нельзя добавить ::before и ::after через интерфейс. Но можно через кастомный CSS. Это позволяет добавлять декоративные линии, градиентные подложки, иконки — без создания дополнительных элементов.

Присвойте элементу класс, например .zb-decorated, и добавьте стили:

.zb-decorated {
  position: relative;
}
.zb-decorated::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #FF6B35, #F7C948);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.zb-decorated:hover::before {
  width: 100%;
}

Зачем это нужно:

Меньше элементов в Zero-блоке — проще управлять адаптивом
Декор не ломается при изменении размеров блока
Анимация при hover без единой строки JavaScript

3. Кастомный курсор, привязанный к блоку

Стандартный курсор-стрелка — скучно. Кастомный курсор мгновенно добавляет сайту характер. В Тильде это делается через CSS + минимум JS.

<style>
  .t-rec[data-record-type="396"] {
    cursor: none;
  }
  .custom-cursor {
    width: 24px;
    height: 24px;
    border: 2px solid #FF6B35;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease, opacity 0.15s ease;
    mix-blend-mode: difference;
  }
  .custom-cursor.is-hover {
    transform: scale(2.5);
    background: rgba(255, 107, 53, 0.15);
  }
</style>

<div class="custom-cursor"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const cursor = document.querySelector('.custom-cursor');
  const zeroBlock = document.querySelector('.t-rec[data-record-type="396"]');

  if (!zeroBlock || !cursor) return;

  zeroBlock.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX - 12 + 'px';
    cursor.style.top = e.clientY - 12 + 'px';
    cursor.style.opacity = '1';
  });

  zeroBlock.addEventListener('mouseleave', () => {
    cursor.style.opacity = '0';
  });

  zeroBlock.querySelectorAll('a, .tn-atom').forEach(el => {
    el.addEventListener('mouseenter', () => cursor.classList.add('is-hover'));
    el.addEventListener('mouseleave', () => cursor.classList.remove('is-hover'));
  });
});
</script>

Замените data-record-type="396" на ID вашего Zero-блока (найдёте в HTML через DevTools). Курсор работает только внутри блока и не мешает остальной странице.

4. Параллакс-эффект на отдельных элементах

Встроенный параллакс Тильды работает на уровне фона блока. Но иногда нужно, чтобы конкретный элемент — иконка, фигура, изображение — двигался с другой скоростью при скролле.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.zb-parallax');

  window.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
      elements.forEach(el => {
        const speed = el.dataset.speed || 0.3;
        const rect = el.getBoundingClientRect();
        const offset = (window.innerHeight - rect.top) * speed;
        el.style.transform = `translateY(${offset}px)`;
      });
    });
  });
});
</script>

Добавьте класс .zb-parallax элементу и опционально data-speed="0.2" через поле атрибутов. Значение 0.1 — еле заметное движение, 0.5 — выраженный эффект. Используйте requestAnimationFrame — без него анимация будет дёрганой.

5. Маски и clip-path для нестандартных форм

Прямоугольные изображения и блоки — визуальный стандарт Тильды. Clip-path ломает эту рамку: круги, многоугольники, волны. Всё через CSS, без Photoshop.

/* Диагональный срез */
.zb-clip-diagonal .tn-atom {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Круглое изображение с анимацией */
.zb-clip-circle .tn-atom {
  clip-path: circle(45% at 50% 50%);
  transition: clip-path 0.5s ease;
}
.zb-clip-circle:hover .tn-atom {
  clip-path: circle(50% at 50% 50%);
}

/* Волнистый край снизу */
.zb-clip-wave .tn-atom {
  clip-path: url(#wave);
}

Для сложных форм используйте онлайн-генераторы clip-path (например, Clippy от Bennett Feely) — скопируйте значение и вставьте в CSS.

Важный нюанс: clip-path не работает с overflow: hidden на родителе. Если маска не применяется — проверьте родительские контейнеры через DevTools.

Итого

Приём	Сложность	Влияние на дизайн
Анимация по скроллу	Средняя	Высокое
Псевдоэлементы	Низкая	Среднее
Кастомный курсор	Средняя	Высокое
Параллакс элементов	Низкая	Среднее
Clip-path маски	Низкая	Высокое

Все приёмы совместимы между собой и работают на текущей версии Тильды. Проверяйте результат на мобильных — кастомный курсор и некоторые clip-path требуют адаптации.