🔵Кастомизация сайтов на Tilda

Многие, кто только начал работать с Tilda, пугаются, когда дело доходит до кода. HTML, CSS, JS — звучит сложно. Но на практике для большинства задач хватает базовых знаний и простых решений.
Я не профи в программировании. Но умею быстро находить и применять лёгкие ходы, которые реально делают сайты лучше. В этом канале я буду делиться именно такими приёмами.

👩‍💻 Анимация перебора чисел при скролле

Считаем от 0 до нужного числа при скролле. Без дополнительных библиотек.

<!-- Подключаем jQuery — без него анимация работать не будет.
Если jQuery уже подключён на странице, эту строку можно не добавлять -->
<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script>

<script>
$(function () {

    // Массив с настройками для каждого счётчика
    // Пояснение:
    // [0] — класс блока (без точки)
    // [1] — до какого числа считать
    // [2] — текст, который появится после числа (если нужно)
    // [3] — на каком расстоянии до блока запустить анимацию
    // [4] — сколько по времени идёт анимация (в миллисекундах)
    const items = [
        ['num_1', 10, '', 100, 650],
        ['num_2', 246, '', 100, 750],
        ['num_3', 357, '', 100, 800]
    ];

    // Перебираем каждый блок
    items.forEach(elArr => {

        let animated = false; // переменная, чтобы анимация запустилась только один раз

        // Находим элемент по классу + добавляем .tn-atom (это нужно, если число находится внутри стандартного блока Tilda)
        const $el = $('.' + elArr[0] + ' .tn-atom');

        // Слушаем событие скролла
        $(window).on('scroll', () => {

            // Если анимация уже была — выходим
            if (animated) return;

            // Считаем, когда блок попадает в зону видимости (с учётом отступа elArr[3])
            const triggerPoint = $el.offset().top - $(window).height() + elArr[3];

            // Проверяем, достигли ли нужной позиции на странице
            if ($(window).scrollTop() > triggerPoint) {
                animated = true; // чтобы не запускалось снова при скролле вверх-вниз

                // Анимируем число от 0 до заданного значения
                $({ val: 0 }).animate({ val: elArr[1] }, {
                    duration: elArr[4], // сколько длится анимация
                    easing: 'swing',    // тип анимации (плавная)
                    
                    // На каждом шаге обновляем содержимое блока
                    step(val) {
                        $el.html(
                            String(Math.ceil(val)) // округляем до целого вверх
                                .replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ') // добавляем пробелы в больших числах: 1000 → 1 000
                                + ' ' + elArr[2] // добавляем подпись (если есть)
                        );
                    }
                });
            }
        });
    });

});
</script>

На что обратить внимание при верстке:

— У блока с числом должно быть достаточно ширины, чтобы в нем поместилось финальное значение (ширину лучше выставить вручную).
— Стартовое число (0) лучше выравнивать по правому краю, чтобы анимация выглядела стабильно.
— Для верстки используйте класс .num_1, .num_2 и так далее — имя класса вы указываете для блока с числом при верстке и добавляете в массив.

Если нужно адаптировать под свой макет — просто добавьте или измените строку в массиве. Скрипт сам всё обработает. Без дублирования кода.

👩‍💻 Наложение элементов с помощью mix-blend-mode

Если ты хочешь, чтобы текст или изображение вживались в фон, как в Figma с режимом Multiply или Overlay — это можно сделать прямо в Tilda через CSS.

1. Добавляем CSS-класс: В Zero-блоке присвой элементу класс, например: .example

2. Пишем код с нужным стилем: Создай HTML-блок и вставь код

<style>
  .example {
    mix-blend-mode: multiply; /* указываем тип наложения */
    opacity: 0.8; /* прозрачность для лучшего эффекта */
  }
</style>

3. Используем прозрачность (opacity) для достижения нужного эффекта.

Друзья, я создал профиль для своих работ, буду рад вам!

ссылка 🔗

👩‍💻 Два калькулятора на одной странице + плавное переключение между ними

Пользователь выбирает вкладку, вводит свои данные — и сразу видит результат. А фраза рядом с формой автоматически меняется. Такой формат удобнее обычных статичных расчётов — человек вовлекается, играет с параметрами, задерживается на странице дольше. Табы сделал через Zero Block + jQuery, а подстановку текста — небольшим JS-скриптом.

Последовательность действий:
1. Создаем Zero Block: один для табов, каждый новый калькулятор — это отдельный Zero, на моем примере получилось всего три.
2. Каждой кнопке присваиваем класс .tab-btn и вставляем ссылки в каждую кнопку: в первую #tab1, во вторую #tab2 и так далее.
3. Zero-блокам с калькуляторами присваиваем классы .uc-tab1, .uc-tab2 и так далее.
4. Используем код:

<style>
.tab--active {
  background:#0000FF !important; /* фоновый цвет активной кнопки (синий) */
  color:#fff !important;         /* цвет текста активной кнопки (белый) */
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

  const $tabs = $(".tab-btn a");              // находим все кнопки-вкладки
  const $blocks = $('[class*="uc-tab"]');     // находим все блоки, которые переключаются

  $blocks.hide();                             // скрываем все вкладки
  $(".uc-tab1").show();                       // показываем первую вкладку
  $('[href="#tab1"]').addClass("tab--active");// делаем первую кнопку активной

  // событие при клике по вкладке
  $tabs.on("click", function (e) {
    e.preventDefault();                       // отключаем стандартное поведение ссылки (чтобы страница не прыгала)

    const target = $(this).attr("href").replace("#", ""); 
    // получаем ID вкладки из ссылки. Было "#tab2" — станет "tab2"

    $tabs.removeClass("tab--active");         // убираем активный стиль у всех кнопок
    $(this).addClass("tab--active");          // добавляем активный стиль на кликнутую кнопку

    $blocks.hide();                           // скрываем все вкладки
    $(".uc-" + target).show();                // показываем ту вкладку, на которую нажали

    if (typeof t_lazyload_update === "function") t_lazyload_update();
    // если на странице есть картинки с lazy-load, обновляем их подгрузку
  });
});
</script>