Как сделать текст с фоновой заливкой изображением на Tilda?

С помощью этой модификации можно добавить эффект текста с фоновой заливкой изображением в Zero Block. Поддерживается одно или несколько изображений. Дополнительно можно включить анимацию смены изображений, выбрать вариант заливки, а также добавить цветной фильтр поверх изображения.

Модификация работает с включенным Autoscale в блоках

Модификация работает только c Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Класс текста

Ссылки на изображения

Тип заливки

Цвет фильтра

Прозрачность фильтра

Анимация

Скорость смены изображений

Настройки анимации

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<style> .ti-textimg .tn-atom { word-wrap: break-word; font-kerning: none; } .ti-textimg .tn-atom .word { display: inline-block; white-space: nowrap; } .ti-textimg .tn-atom .letter { display: inline-block; background-size: cover; background-position: center; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ti-textimg .tn-atom .single-img { display: inline-block; background-size: cover; background-position: center; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } </style> <script> document.addEventListener('DOMContentLoaded', function () { const TCDtextelemTilda = document.querySelectorAll('.ti-textimg .tn-atom'); if (!TCDtextelemTilda.length) return; const Tildaimg = 'b'; const TCDLoad = false; const tmTCD = 1000; const TildaBackTC = '#ffffff33'; const TCDanTicode = (Tildaimg === 'z'); TCDtextelemTilda.forEach(el => { const TCDLinksmas = ` `.split(',') .map(i => i.trim()) .filter(Boolean); const TCDmultiImg = TCDLinksmas.length > 1; const tmatomtxtTC = el.textContent.trim(); let html = ''; let imgIndex = 0; if (!TCDmultiImg) { html = `<span class="single-img" style="background-image:linear-gradient(${TildaBackTC},${TildaBackTC}),url('${TCDLinksmas[0]}')">${tmatomtxtTC}</span>`; } else { const TCDspan = tmatomtxtTC.split(' '); TCDspan.forEach((word, wIndex) => { html += `<span class="word">`; for (const ch of word) { const Tiimg = TCDanTicode ? TCDLinksmas[Math.floor(Math.random() * TCDLinksmas.length)] : TCDLinksmas[imgIndex++ % TCDLinksmas.length]; html += `<span class="letter" style="background-image:linear-gradient(${TildaBackTC},${TildaBackTC}),url('${Tiimg}')">${ch}</span>`; } html += `</span>`; if (wIndex < TCDspan.length - 1) html += ' '; }); } el.innerHTML = html; if (TCDLoad && TCDmultiImg) { const TCDanimletters = el.querySelectorAll('.letter'); let direction = 1; let index = 0; setInterval(() => { if (TCDanTicode) { TCDanimletters.forEach(span => { const Tiimg = TCDLinksmas[Math.floor(Math.random() * TCDLinksmas.length)]; span.style.backgroundImage = `linear-gradient(${TildaBackTC},${TildaBackTC}),url('${Tiimg}')`; }); } else { index += direction; if (index >= TCDLinksmas.length - 1 || index <= 0) direction *= -1; const imgList = direction === 1 ? [...TCDLinksmas] : [...TCDLinksmas].reverse(); TCDanimletters.forEach((span, i) => { const Tiimg = imgList[i % imgList.length]; span.style.backgroundImage = `linear-gradient(${TildaBackTC},${TildaBackTC}),url('${Tiimg}')`; }); } }, tmTCD); } }); }); </script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

1. Создаем в зеро блок текст, указываем в настройках прозрачный цвет и присваиваем класс ti-textimg
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. Создаем любой стандартный блок галереи и загружаем в него одно или несколько фото. В контенте блока кликаем по ссылке возле картинки правой кнопки мышки и копируем адрес ссылки на изображение. Вставляем ссылку в генератор в поле "Ссылки на изображения". Если нужно выводить несколько изображений, то ссылки вставляем через запятую без пробела. Пример: https://static.tildacdn.one/tild3161-3539-4162-b065-373565653836/danielhansen330776.jpg,https://static.tildacdn.one/tild3666-3334-4239-a631-353537373362/isairamos128262.jpg

Скрываем блок галереи, кликнув по иконке глаза. Важно: не удалять блок.

Примечание! Если ссылка одна, то изображение растягивается на весь текст. Если указали несколько ссылок, то каждая ,буква заливается своим изображением.

При необходимости указываем другие настройки в генераторе:
Тип заливки - если выбран "по порядку" буквы заливаются изображениями из массива по порядку. Если выбрали "случайно", буквы заливаются случайными изображениями из массива при каждом обновлении страницы.
Цвет фильтра и Прозрачность фильтра - можно указать цвет прозрачность для заливки поверх изображения.

Важно! Если заливка цветом не нужна, то указываем любой цвет и ставим прозрачность 0%

Анимация - работает только если добавили больше одного изображения. Если включили и тип заливки выбран "по порядку" то в буквах будет смена изображений в обратном порядке циклично. Если выбран тип "рандом", буквы меняют изображения случайно.
Скорость смены изображений - можно указать скорость смены изображений в миллисекундах.

3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.

Вариант 1: статика с одним изображением

Вариант 2: анимация с несколькими изображениями