URL скопирован в буфер обмена!

Как сделать курсор с эффектом следа картинок в Zero BLock?

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

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

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

Ссылки на изображения
Ширина изображения
Высота изображения
Количество изображений в ховсте
Последователньость изображений
Анимация изображений
Скорость отрисовки изображений
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD053--><style> .ti-bgtail { width: 100%; height: 100%; background-color: transparent; position: relative; overflow: hidden; } .tail-image { width: 300px; height: 400px; position: absolute; pointer-events: none; z-index: auto; opacity: 0.9; transform: scale(0.9); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { if (window.innerWidth > 960) { const TiCodeCursor = document.getElementById("TC-Cursor"); const TiCodeBg = document.querySelector(".ti-bgtail"); const TiCodeImageMasive = ""; const TiTailImages = TiCodeImageMasive.split(","); let TiCodeCursorZone = false; let lastX = TiCodeBg.clientWidth / 2; let lastY = TiCodeBg.clientHeight / 2; const TiTailQueue = []; let TiCodeTraveled = 0; const TiCodeMaxImages = 10; const TiArrow = false; let TiImageIndex = 0; TiCodeBg.addEventListener("mouseenter", () => { TiCodeCursorZone = true; }); TiCodeBg.addEventListener("mouseleave", () => { TiCodeCursorZone = false; }); function getRandomImage() { const TiCodeRandom = Math.floor(Math.random() * TiTailImages.length); return TiTailImages[TiCodeRandom]; } function TcTail(x, y) { if (TiTailImages.length === 0) return; if (TiTailQueue.length >= TiCodeMaxImages) { const TColdestTail = TiTailQueue.shift(); gsap.to(TColdestTail, { duration: 0.2, scaleX: 0, scaleY: 0, onComplete: () => { TiCodeBg.removeChild(TColdestTail); }, }); } const TiCodesImage = document.createElement("img"); TiCodesImage.src = TiArrow ? getRandomImage() : TiTailImages[TiImageIndex]; TiCodesImage.classList.add("tail-image"); const TCSize = 300; let tailX = x - TCSize / 2 - TiCodeBg.getBoundingClientRect().left; let tailY = y - TCSize / 2 - TiCodeBg.getBoundingClientRect().top; TiCodesImage.style.left = tailX + "px"; TiCodesImage.style.top = tailY + "px"; TiCodeBg.appendChild(TiCodesImage); const TicursorDirectionX = x - lastX; const TicursorDirectionY = y - lastY; gsap.to(TiCodesImage, { opacity: 1, duration: 0.7, x: `+=${TicursorDirectionX * 0.9}`, y: `+=${TicursorDirectionY * 0.9}`, ease: [0.42, 0, 0.58, 1], onComplete: () => { setTimeout(() => { gsap.to(TiCodesImage, { duration: 0.3, scaleX: 0, scaleY: 0, ease: "power1.in", onComplete: () => { TiCodeBg.removeChild(TiCodesImage); TiTailQueue.shift(); }, }); }, 700); }, }); lastX = x; lastY = y; if (!TiArrow) { TiImageIndex = (TiImageIndex + 1) % TiTailImages.length; } TiTailQueue.push(TiCodesImage); } TiCodeBg.addEventListener("mousemove", (e) => { const x = e.clientX; const y = e.clientY; if (TiCodeCursorZone) { TiCodeCursor.style.left = x + "px"; TiCodeCursor.style.top = y + "px"; const TiDistance = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2)); TiCodeTraveled += TiDistance; if (TiCodeTraveled >= 200) { TcTail(x, y); TiCodeTraveled = 0; } } }); } }); </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block html элемент и назначаем ему класс ti-bgtail
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

В сам html вставляем код <div class="ti-bgtail"></div><div id="TC-Cursor"></div> и настраиваем ширину и высоту 100% по Windows container

2. Создаем галерею GL02 и загружаем в нее картинки через контент. После загрузки кликаем ПКМ на картинку и копируем ее ссылку. Ссылки через запятую без пробелов вставляем в генератор в поле "ссылки на изображения". Например: https://static.tildacdn.one/tild3161-3539-4162-b065-373565653836/danielhansen330776.jpg,https://static.tildacdn.one/tild3161-3539-4162-b065-373565653836/danielhansen330454.jpg

Блок галереи скрываем, кликая на глаз. Удалять блок нельзя!!

3. Переходим в генератор кода и делаем дополнительные настройки:
Ширина и высота изображения - указываем высоту и ширину картинок в хвосте;
Количество изображений в хвосте - указываем максимально число картинок которые могут быть одновременно отрисованы в хвосте. При отрисовке новых картинок, которые превышают лимит, более старые картинки в хвосте будут удаляться быстрее;
Последовательность изображений - выбираем отрисовку картинок по порядку или рандомно;
Анимация изображений - указываем анимацию исчезновения картинок в хвосте;
Скорость отрисовки изображений - выбираем скорость отрисовки картинок в ховсте. В примере стоит быстрая скорость, больше картинок рисует за короткий промежуток. Если у вас мало изображений(меньше 7), то ставим меньшую скорость.

4. Копируем готовый код и вставляем в HTML блок Т123.

Чтобы посмотреть пример наведи курсор на блок

Эффект работает только на экранах 960 и выше...

Made on
Tilda