Как создать анимацию дыма с изменением цвета на Tilda

Вы видели сайт setaprint.ch с эффектной анимацией, напоминающей заблюренный дым, который меняет цвет при движении курсора? Этот эффект создаётся с помощью JavaScript и CSS, а не чистыми HTML-тегами. В этой статье мы разберём, как реализовать подобную анимацию на платформе Tilda даже без глубоких знаний программирования.

Что такое анимация дыма и как она работает

Анимация, которую вы видели, основана на частицах (particles) - множестве мелких элементов, которые движутся, меняют размер и цвет. Цвет меняется динамически, часто в зависимости от положения курсора (например, градиент от синего к фиолетовому). Для этого используется библиотека particles.js или её аналоги, написанные на JavaScript. CSS отвечает за размытие (blur) и плавные переходы, а HTML - только за контейнер для размещения.

Как повторить эффект на Tilda: пошаговая инструкция

Шаг 1. Подготовка Zero-блока

На Tilda переключитесь на Zero-блок (пустой блок для кастомного кода). Добавьте на страницу HTML-контейнер, например, <div id='particles-js'></div>. Установите ему ширину 100% и высоту 100vh (весь экран).

Шаг 2. Подключение библиотеки частиц

В настройках Zero-блока откройте раздел «Вставка кода» и добавьте в HEAD ссылку на CDN библиотеки particles.js: <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>. Это позволит использовать готовые функции для создания эффекта.

Шаг 3. Настройка конфигурации частиц

Создайте JavaScript-код, который инициализирует частицы. Пример базовой конфигурации:

particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: ['#ff0000', '#00ff00', '#0000ff'] },
    shape: { type: 'circle' },
    opacity: { value: 0.5 },
    size: { value: 3 },
    move: { speed: 2 },
    line_linked: { enable: false }
  }
});

Вставьте этот код в FOOTER блока. Цвета задаются массивом - они будут меняться случайно. Для реакции на курсор добавьте событие mousemove, которое обновляет цвет частиц.

Шаг 4. Добавление размытия и динамики цвета

Чтобы получить эффект «заблюренного дыма», добавьте CSS-стили в HEAD: #particles-js { filter: blur(10px); }. Для смены цвета при движении мыши используйте JavaScript: отслеживайте координаты курсора и меняйте particles.color. Пример кода для динамики цвета можно найти в открытых источниках или на GitHub.

Советы для новичков: как не запутаться

• Не бойтесь «Посмотреть код» - в браузере нажмите F12, перейдите на вкладку «Elements» и ищите теги <script> - там часто лежит готовая анимация.
• Ищите готовые решения - на CodePen или GitHub тысячи примеров анимации частиц, которые можно скопировать.
• Тестируйте на Tilda - сохраняйте изменения и обновляйте страницу, чтобы видеть результат.
• Используйте видеоуроки - на YouTube есть ролики «particles.js на Tilda» с пошаговым разбором.

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

Можно ли сделать анимацию без JavaScript?

Только с CSS создать динамический «дым», который меняет цвет при движении курсора, невозможно. CSS отвечает за размытие и статичные градиенты, а JavaScript - за логику движения и реакцию на мышь.

Какие библиотеки подходят для Tilda?

Лучший выбор - particles.js (лёгкая, много настроек) и Three.js (для сложных 3D-эффектов). Обе подключаются через CDN и работают в Zero-блоке.

Почему анимация не отображается на мобильных?

Проверьте, что в конфигурации частиц нет ограничений по производительности. Уменьшите количество частиц (value: 30-50) и отключите line_linked. Также убедитесь, что блок имеет явно заданную высоту.

Как изменить цветовую схему под свой бренд?

В конфигурации частиц замените массив color на hex-коды ваших фирменных цветов. Например: ['#1a237e', '#4a148c', '#311b92']. Для динамики цвета привяжите изменение к координатам курсора через JavaScript.

Где найти готовый код для вставки?

На CodePen введите в поиске «particles smoke Tilda» - вы найдёте десятки примеров с открытым кодом. Скопируйте HTML, CSS и JS в соответствующие разделы Zero-блока.