<!--Стикеры-->
<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>
<script>
$('.t-records').wrapAll('<div class="stickers-wrapper">');
var laststick = $(".mt-stickers .mt-sticker").length - 1;
var stickerEq = -1;
$(".stickers").click(function (e) {
// Указываем видимое разрешение
if ($(window).width() > 375) {
if (stickerEq == laststick) {
stickerEq = 0;
} else {
stickerEq++;
}
var mt_Sticker = $(".mt-stickers .mt-sticker").eq(stickerEq).clone().appendTo(".stickers");
var marginLeft = e.pageX - $(".stickers").offset().left - mt_Sticker.width() / 2;
var marginTop = e.pageY - $(".stickers").offset().top - mt_Sticker.height() / 2;
mt_Sticker.css({ "left": marginLeft, "top": marginTop, transform: "scale(1, 1)" });
setTimeout(() => {
mt_Sticker.addClass("sticker-hide");
}, 2000);
}
});
</script>
<style>
.mt-stickers {
display: none !important;
}
.t-records {
overflow: hidden;
}
.mt-sticker {
position: absolute !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 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>