URL скопирован в буфер обмена!
Как сделать бегущую строку изображений на Tilda?
С помощью этой модификации можно сделать бесконечную бегущую строку элементов в Zero Block на Tilda. Дополнительно можно настроить направление движения строки, скорость анимации, тип запуска (автоматический или при прокрутке страницы), а также включить паузу при наведении курсора.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс группы элементов
Тип движения строки
Скорость (от 1 до 5)
Пауза при наведении
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD111--><script>
document.addEventListener('DOMContentLoaded', function () {
function TiCodestartmod111() {
const TCDstart = 'tcdnmlr';
const TCDMove = 1;
const TCDElementstroke = document.querySelector('.tcd-line');
if (!TCDElementstroke || TCDElementstroke.offsetWidth === 0) return;
const TCDparent = TCDElementstroke.parentElement;
const TiCodeSTRWidth = TCDElementstroke.offsetWidth;
const TiCodescreenWidth = window.innerWidth;
const wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.width = '100%';
wrapper.style.height = TCDElementstroke.offsetHeight + 'px';
TCDparent.insertBefore(wrapper, TCDElementstroke);
wrapper.appendChild(TCDElementstroke);
TCDElementstroke.style.position = 'absolute';
let TCDnumCopies = Math.ceil(TiCodescreenWidth / TiCodeSTRWidth) + 4;
let TiCopys = Math.floor(TCDnumCopies / 2);
let Tipos = [];
for (let i = -TiCopys; i <= TiCopys; i++) {
let clone = i === 0 ? TCDElementstroke : TCDElementstroke.cloneNode(true);
if (i !== 0) clone.classList.add('tcdclone');
wrapper.appendChild(clone);
clone.style.position = 'absolute';
clone.style.left = (i * TiCodeSTRWidth) + 'px';
Tipos.push(i * TiCodeSTRWidth);
}
const TCDstartMove = 2;
let TCDcntSpeed = TCDstartMove;
const STticode = false;
let hovered = false;
if (STticode) {
wrapper.addEventListener('mouseenter', () => hovered = true);
wrapper.addEventListener('mouseleave', () => hovered = false);
}
function TiCodeanimstroke() {
const elements = wrapper.querySelectorAll('.tcd-line, .tcdclone');
if (TCDstart === 'stcdnml') {
const scrollOffset = window.scrollY || document.documentElement.scrollTop;
const offset = (scrollOffset * TCDMove) % TiCodeSTRWidth;
Tipos = Tipos.map((_, index) => (index - TiCopys) * TiCodeSTRWidth - offset);
} else if (TCDstart === 'stcdnmlr') {
const scrollOffset = window.scrollY || document.documentElement.scrollTop;
const offset = (scrollOffset * TCDMove) % TiCodeSTRWidth;
Tipos = Tipos.map((_, index) => (index - TiCopys) * TiCodeSTRWidth + offset);
} else {
if (STticode) {
if (hovered && TCDcntSpeed > 0) {
TCDcntSpeed -= 0.3;
if (TCDcntSpeed < 0) TCDcntSpeed = 0;
} else if (!hovered && TCDcntSpeed < TCDstartMove) {
TCDcntSpeed += 0.3;
if (TCDcntSpeed > TCDstartMove) TCDcntSpeed = TCDstartMove;
}
}
const drctTi = TCDstart === 'tcdnmlr' ? 1 : -1;
Tipos = Tipos.map((pos) => pos + TCDcntSpeed * drctTi);
Tipos = Tipos.map((pos) => {
if (drctTi === -1 && pos <= -TiCodeSTRWidth) {
let max = Math.max(...Tipos);
return max + TiCodeSTRWidth;
} else if (drctTi === 1 && pos >= TiCodescreenWidth) {
let min = Math.min(...Tipos);
return min - TiCodeSTRWidth;
}
return pos;
});
}
elements.forEach((element, index) => {
element.style.left = Tipos[index] + 'px';
});
requestAnimationFrame(TiCodeanimstroke);
}
TiCodeanimstroke();
}
const checkVisible = setInterval(() => {
const target = document.querySelector('.tcd-line');
if (target && target.offsetWidth > 0 && target.offsetHeight > 0) {
clearInterval(checkVisible);
TiCodestartmod111();
}
}, 300);
});
</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. Создаем в Zero Block несколько шейпов или изображений и объедениям их в object группу(в группу можно также добавлять кнопки или текст). Присваиваем группе класс tcd-line
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Для изображений и шейпов(если загоняли в них картинки) обязательно отключаем отключаем ленивую загрузку.
Важно! В конце группы элементов добавляем прозрачный шейп, который будет служить отступом между группами(ширина шейпа служит отступом). Если его не добавить, то группы элементов будут идти слитно.
2. Указываем дополнительные настройки в генераторе:
Тип движения строки - выбираем тип движения. Два первых варианта это зацикленное движение с указанной скоростью. 3 и 4 тип это движение по скроллу (бегущая строка будет двигаться только в момент прокрутки страницы);
Скорость (от 1 до 5) — указываем скорость движения от 1 до 5 - где 1 это медленно, а 5 - быстро. В режиме скролл этот параметр виляет на плавность движения;
Пауза при наведении - если включено, то при наведении курсора строка будет плавно останавливаться. Пауза не работает если выбран режим по скроллу;
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под зеро Zero Block с строкой
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Для изображений и шейпов(если загоняли в них картинки) обязательно отключаем отключаем ленивую загрузку.
Важно! В конце группы элементов добавляем прозрачный шейп, который будет служить отступом между группами(ширина шейпа служит отступом). Если его не добавить, то группы элементов будут идти слитно.
2. Указываем дополнительные настройки в генераторе:
Тип движения строки - выбираем тип движения. Два первых варианта это зацикленное движение с указанной скоростью. 3 и 4 тип это движение по скроллу (бегущая строка будет двигаться только в момент прокрутки страницы);
Скорость (от 1 до 5) — указываем скорость движения от 1 до 5 - где 1 это медленно, а 5 - быстро. В режиме скролл этот параметр виляет на плавность движения;
Пауза при наведении - если включено, то при наведении курсора строка будет плавно останавливаться. Пауза не работает если выбран режим по скроллу;
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под зеро Zero Block с строкой
Уже мечтаешь о Бали?
Сделай шаг навстречу!
Узнать больше
