Привет! Сегодня немного про panzoom.js
✍️ у вас есть контент, который нужно показывать в определенной области с возможностью увеличивать и уменьшать, а также, когда масштаб увеличен, чтобы можно было мышью перемещать контент по сцене, просматривая его части

1️⃣ подключите panzoom.js тем способом, который удобен вам в вашем проекте: используйте тег <script>, либо установите в проект через npm/yarn и тд, либо импортируйте в js-файл, etc.

2️⃣ контент для panzoom поместите в контейнер, который вы будете использовать для инициализации panzoom-сцены:
<div id="panzoom-element"></div>. Если вам нужны будут кнопки для panzoom, например +/- создайте их вне контейнера panzoom

3️⃣ пример инициализации panzoom:

this.panzoom = Panzoom(document.getElementById('panzoom-element'), {
       /* во сколько раз максимально можно будет увеличивать*/
        maxScale: 5,
        /* во сколько раз увеличить при двойном клике */
        zoomDoubleClickSpeed: 1,
        /* перемещение контента, только при увеличенном масштабе */
        panOnlyWhenZoomed: true,
        /* для сенсорного экрана, касания = перемещение вниз */
        touchAction: 'pan-y',
});

➡️ как менять масштаб

this.panzoom?.zoom(<значение>, { animate: true});

➡️ как менять координаты сцены

this.panzoom?.pan(<значение1>, <значение2>, { relative: true });

➡️ как управлять масштабом при помощи колесика мыши

document.getElementById('panzoom-element').parentElement.addEventListener('wheel', panzoom.zoomWithWheel);

➡️ как удалить объект panzoom

if (this.panzoom) {
    this.panzoom.destroy();
}

🔗 Это не все о panzoom, только самые базовые настройки, подробнее в документации