Стикеры

Модификаторы

Модификация позволяет создать стикеры (изображения) при клике по области

Описание

Инструкция по подключению

В 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>