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

Анимация курсора внутри фигуры (шейпа) - популярный приём для привлечения внимания пользователей, как на сайте JetBrains Aqua. На Tilda это реализуется через Zero Block с помощью кастомного CSS и JavaScript. В этой инструкции разберём готовое решение, которое избавит вас от трёх дней мучений.

Что такое анимация курсора в шейпе?

Это эффект, при котором курсор мыши взаимодействует с геометрической фигурой (круг, многоугольник, волна). Например, при наведении курсора фигура меняет цвет, масштаб или форму. На Tilda такой эффект часто используют в Zero Block для создания интерактивных баннеров.

Пошаговая реализация на Tilda

Шаг 1: Создайте Zero Block и добавьте шейп

В редакторе Tilda перейдите в раздел Zero Block. Добавьте фигуру (например, круг или прямоугольник) через элемент Shape. Настройте её размер, цвет и положение. Убедитесь, что фигура имеет уникальный ID (например, #my-shape).

Шаг 2: Добавьте CSS-код для стилизации

Откройте настройки Zero Block и вставьте CSS-код в поле CSS (Custom Styles). Пример кода для плавного изменения цвета при наведении:

#my-shape {
  transition: all 0.3s ease;
  cursor: pointer;
}
#my-shape:hover {
  background-color: #ff6b6b;
  transform: scale(1.1);
}

Этот код добавляет анимацию при наведении - фигура увеличивается и меняет цвет.

Шаг 3: Добавьте JavaScript для отслеживания движения курсора

Чтобы курсор взаимодействовал с шейпом динамически (например, следовал за мышью), используйте JavaScript. Вставьте код в поле JS (Custom JavaScript) в настройках Zero Block:

document.addEventListener('mousemove', function(e) {
  var shape = document.getElementById('my-shape');
  var rect = shape.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  shape.style.transform = 'translate(' + (x / 10) + 'px, ' + (y / 10) + 'px)';
});

Этот код заставляет фигуру слегка двигаться вслед за курсором, создавая эффект «притяжения». Вы можете настроить коэффициент деления (10) для изменения интенсивности.

Тонкая настройка и оптимизация

Для точного воспроизведения референса JetBrains Aqua используйте комбинацию CSS-трансформаций и событий mousemove. Рекомендуется добавить will-change: transform в CSS для плавности. Если фигура не реагирует, проверьте ID элемента и консоль браузера на ошибки.

Часто задаваемые вопросы

• Почему анимация не работает на мобильных устройствах? Событие mousemove не поддерживается на тач-экранах. Для мобильных добавьте альтернативную анимацию через touchmove.
• Можно ли анимировать несколько шейпов? Да, присвойте каждому шейпу уникальный ID и пропишите отдельные обработчики в JavaScript.
• Как ускорить анимацию? Уменьшите значение в коде translate (например, с 10 до 5) для более быстрой реакции.

Заключение

Анимация курсора внутри шейпа на Tilda - это комбинация CSS-свойств и JavaScript-событий. Используя Zero Block, вы можете добиться эффекта, аналогичного JetBrains Aqua, за 10 минут. Главное - правильно задать ID фигуры и протестировать код в браузере. Если остались вопросы, обратитесь к документации Tilda или в сообщество разработчиков.