Стикеры по клику на Тильда
Хотите добавить разнообразия и динамики сайту? Делюсь пошаговой инструкцией для анимации ваших стикеров (изображений) по клику на Тильда
Здесь можно потыкать
и протестировать анимацию
Начну с того, что эту модификацию я увидела на этом сайте, но к сожалению с кодом из этой инструкции у меня ничего не вышло. Поэтому решила сделать все сама с помощью нейросети Perplexity.
А еще сразу скажу, что код не подходит для автоскейла. Так, что в блоке, где вы хотите сделать такую анимацию лучше его не использовать
А еще сразу скажу, что код не подходит для автоскейла. Так, что в блоке, где вы хотите сделать такую анимацию лучше его не использовать
Шаг 1
Создаем шейп — область, в которой будет анимация. Кликаем по шейпу ПКМ и добавляем css-класс «stickers».
Обратите внимание: чтобы анимация не конфликтовала с остальными элементами, создайте отдельный прозрачный шейп. Разместите все важные элементы — кнопки, текст и формы — поверх шейпа, а второстепенные и некликабельные элементы оставьте под ним.
Обратите внимание: чтобы анимация не конфликтовала с остальными элементами, создайте отдельный прозрачный шейп. Разместите все важные элементы — кнопки, текст и формы — поверх шейпа, а второстепенные и некликабельные элементы оставьте под ним.
Шаг 2
Ниже добавляем блок T123 и вставляем туда код
<script>
document.addEventListener("DOMContentLoaded", function () {
// Массив ссылок на один или несколько стикеров
const STICKER_SRCS = [
"https://static.tildacdn.com/tild3063-6565-4333-b738-373264323931/photo.png"
];
const area = document.querySelector(".stickers");
if (!area) return;
area.style.position = area.style.position || "relative";
area.style.overflow = "hidden";
area.addEventListener("click", function (e) {
const rect = area.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const img = document.createElement("img");
// Выбор случайного стикера из массива
const randomIndex = Math.floor(Math.random() * STICKER_SRCS.length);
img.src = STICKER_SRCS[randomIndex];
img.alt = "";
img.loading = "lazy";
img.style.maxWidth = "120px";
img.style.width = "120px";
img.style.height = "auto";
img.style.position = "absolute";
img.style.pointerEvents = "none";
img.style.zIndex = "999999";
img.style.transform = "scale(0.3)";
img.style.opacity = "0";
img.style.transition = "transform 0.25s ease, opacity 0.25s ease";
area.appendChild(img);
const w = img.offsetWidth;
const h = img.offsetHeight;
img.style.left = (x - w / 2) + "px";
img.style.top = (y - h / 2) + "px";
requestAnimationFrame(function () {
img.style.transform = "scale(1)";
img.style.opacity = "1";
});
setTimeout(function () {
img.style.transform = "scale(0.3)";
img.style.opacity = "0";
setTimeout(function () {
img.remove();
}, 250);
}, 1000);
});
});
</script>
document.addEventListener("DOMContentLoaded", function () {
// Массив ссылок на один или несколько стикеров
const STICKER_SRCS = [
"https://static.tildacdn.com/tild3063-6565-4333-b738-373264323931/photo.png"
];
const area = document.querySelector(".stickers");
if (!area) return;
area.style.position = area.style.position || "relative";
area.style.overflow = "hidden";
area.addEventListener("click", function (e) {
const rect = area.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const img = document.createElement("img");
// Выбор случайного стикера из массива
const randomIndex = Math.floor(Math.random() * STICKER_SRCS.length);
img.src = STICKER_SRCS[randomIndex];
img.alt = "";
img.loading = "lazy";
img.style.maxWidth = "120px";
img.style.width = "120px";
img.style.height = "auto";
img.style.position = "absolute";
img.style.pointerEvents = "none";
img.style.zIndex = "999999";
img.style.transform = "scale(0.3)";
img.style.opacity = "0";
img.style.transition = "transform 0.25s ease, opacity 0.25s ease";
area.appendChild(img);
const w = img.offsetWidth;
const h = img.offsetHeight;
img.style.left = (x - w / 2) + "px";
img.style.top = (y - h / 2) + "px";
requestAnimationFrame(function () {
img.style.transform = "scale(1)";
img.style.opacity = "1";
});
setTimeout(function () {
img.style.transform = "scale(0.3)";
img.style.opacity = "0";
setTimeout(function () {
img.remove();
}, 250);
}, 1000);
});
});
</script>
Шаг 3
Если вы хотите вставить один стикер, то просто замените ссылку на изображение внутри кавычек в коде на свою.
А если хотите, чтобы было несколько стикеров, то вставьте ссылки на изображения через запятую следующим образом:
p.s. для вставки изображений в код я перемещаю их сначала в zero-блок, нажимаю ПКМ и копирую URL изображения
Шаг 4: публикуем и проверяем!
Что важно учитывать:
— HTML-блок должен быть ниже Zero-блока
— CSS-класс должен совпадать полностью и должен быть назначен только на один шейп в блоке
— Проверяйте код, ориентируйтесь на скрины. Проверьте запятые, структуру, наличие кавычек и закрытого скрипта <script>...</script>
— Не судите строго! Код написан с помошью нейросети и меня, которая пока совсем мало знает в разработке ♥
Надеюсь инструкция будет полезной! Если что пишите в телеграм
— CSS-класс должен совпадать полностью и должен быть назначен только на один шейп в блоке
— Проверяйте код, ориентируйтесь на скрины. Проверьте запятые, структуру, наличие кавычек и закрытого скрипта <script>...</script>
— Не судите строго! Код написан с помошью нейросети и меня, которая пока совсем мало знает в разработке ♥
Надеюсь инструкция будет полезной! Если что пишите в телеграм
* WhatsApp и Instagram — продукты компании Meta, которая признана экстремистской и запрещена в России
