Интерактивные стикеры

<!--TS30 - Модификация для Тильды. Интерактивный стикер https://mod.tistols.com/sticker--><script type="module" crossorigin src="https://mods.tistols.com/mods/sticker/sticker-23r87yjkh.js"></script><link rel="stylesheet" href="https://mods.tistols.com/mods/sticker/sticker-23r87yjkh.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Draggable.min.js"></script>

<!--TS30 - Модификация для Тильды. Интерактивный стикер https://mod.tistols.com/sticker-->
<!-- 
image-src: Путь к изображению стикера. (Определяет, какую картинку будет «отрывать» эффект)
peel-back-hover-pct: Глубина «отлипа» при наведении. (От 0 до 100 — насколько сильно верхняя часть изображения визуально отходит назад при hover-эффекте)
peel-back-active-pct: Глубина «отлипа» при клике/зажатии. (От 0 до 100 — насколько сильно верхняя часть изображения визуально отходит назад при клике/зажатии)
peel-easing: Тип GSAP-смягчения анимации при возвращении изображения. (Меняет характер движения: более мягкое, резкое, упругое и т.п. https://gsap.com/docs/v3/Eases/)
peel-hover-easing: Тип GSAP-смягчения анимации при наведении курсора. (Определяет плавность эффекта «отлипа» при hover https://gsap.com/docs/v3/Eases/)
width: Ширина изображения в пикселях. (Меняет итоговый размер изображения и её «крышки»-заплатки)
shadow-intensity: Интенсивность тени. (От 0 до 1 увеличивает глубину и заметность тени от изображения)
lighting-intensity: Интенсивность светового блика. (От 0 до 1 определяет силу эффекта точечного света на изображении)
initial-position: Начальная позиция изображения внутри контейнера. (JSON-объект {x,y} или 'center')
peel-direction: Направление отлипа в градусах. (От 0 до 360 меняет то, куда изображение «отлипается»)
class-name: Дополнительный CSS-класс. (Позволяет кастомизировать стили конкретного экземпляра)
-->
<div class="sticker-peels-area">
    <div
      class="sticker-peel-container" 
      data-image-src="https://static.tildacdn.com/tild6562-3534-4836-a436-363166303261/Group.png"
      data-peel-back-hover-pct="20"
      data-peel-back-active-pct="40"
      data-peel-easing="power3.out"
      data-peel-hover-easing="power2.out"
      data-width="300"
      data-shadow-intensity="0.6"
      data-lighting-intensity="0.1"
      data-initial-position='{"x": "20%", "y": "70%"}'
      data-peel-direction="0"
      data-class-name=""
    ></div>
    
    <div
      class="sticker-peel-container"
      data-image-src="https://static.tildacdn.com/tild3135-6565-4633-b633-333935336261/Group.png"
      data-peel-back-hover-pct="20"
      data-peel-back-active-pct="40"
      data-peel-easing="power3.out"
      data-peel-hover-easing="power2.out"
      data-width="200"
      data-shadow-intensity="0.6"
      data-lighting-intensity="0.1"
      data-initial-position='{"x": "70%", "y": "70%"}'
      data-peel-direction="0"
      data-class-name=""
    ></div>

    <div
      class="sticker-peel-container"
      data-image-src="https://static.tildacdn.com/tild6337-3730-4238-b139-333164333835/Group.png"
      data-peel-back-hover-pct="20"
      data-peel-back-active-pct="40"
      data-peel-easing="power3.out"
      data-peel-hover-easing="power2.out"
      data-width="200"
      data-shadow-intensity="0.6"
      data-lighting-intensity="0.1"
      data-initial-position='{"x": "50%", "y": "20%"}'
      data-peel-direction="0"
      data-class-name=""
    ></div>
</div>