Меню

Стикеры

Модификаторы
Модификация позволяет создать стикеры (изображения) при клике по области
Описание
Инструкция по подключению
В Zero блоке создаём шейп и растягиваем на необходимую ширину и высоту (в нем и будут появляться стикеры). Добавляем на него класс stickers
Шаг 1
Через блок T123 подключаем изображения
Шаг 2
<div class="mt-stickers">
<img src="https://static.tildacdn.com/tild3839-6236-4839-b539-643038336336/Group.svg" loading="lazy" alt="" class="mt-sticker">
<img src="https://static.tildacdn.com/tild6131-3262-4361-a634-656663386235/Group.svg" loading="lazy" alt="" class="mt-sticker">
<img src="https://static.tildacdn.com/tild3633-3765-4132-a466-393636613739/Group.svg" loading="lazy" alt="" class="mt-sticker">
</div>
Через блок IM01 загружаем свои изображения и копируем url пути до изображений. Заменяем их в коде выше
Шаг 3
Через блок T123 подключаем скрипт и стили для анимации
Шаг 4
<script>
$('.t-records').wrapAll('<div class="stickers-wrapper">');
</script>
<style>
.mt-stickers {
display: none !important;
}
.t-records {
overflow: hidden;
}
.mt-sticker {
position: absolute !important;
left: 0% !important;
top: 0% !important;
z-index: 9999999 !important;
pointer-events: none; !important;
transform: scale(0.8, 0.8);
transition-property: transform;
transition-duration: 200ms;
transition-timing-function: ease;
}
.sticker-hide {
transform: scale(0, 0) !important;
}
.stickers-wrapper {
overflow: hidden !important;
position: relative !important;
}
</style>
<script>
var laststick = $( ".mt-stickers .mt-sticker" ).length - 1;
var stickerEq = -1;
$( "body" ).click(function(e) {
if (stickerEq == laststick) {
stickerEq = 0;
} else {
stickerEq++;
};
var mt_Sticker = $( ".mt-stickers .mt-sticker" ).eq(stickerEq).clone().appendTo( ".stickers" );
var marginLeft = e.pageX - (mt_Sticker.width() / 2);
var marginTop = e.pageY - (mt_Sticker.height() / 2);
mt_Sticker.css({'margin-left': marginLeft, 'margin-top': marginTop, 'transform': 'scale(1, 1)'});
setTimeout(() => { 
mt_Sticker.addClass('sticker-hide');
}, 2000);
});
</script>
Не получилось подключить?
Не беда, ты всегда можешь написать мне в Telegram и запросить исходник
Другие модификации
Подсказки при наведении курсора
Модификаторы
3D галерея
Модификаторы
Универсальный курсор
Модификаторы
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda