A web component for pinch zooming DOM elements.
Usage
npm install --save-dev pinch-zoom-element
<pinch-zoom>
<h1>Hello!</h1>
</pinch-zoom>
Now the above can be pinch-zoomed!
API
<pinch-zoom class="my-pinch-zoom">
<h1>Hello!</h1>
</pinch-zoom>
<script>
const pinchZoom = document.querySelector('.my-pinch-zoom');
</script>
Properties
pinchZoom.x;
pinchZoom.y;
pinchZoom.scale;
Methods
Set the transform. All values are optional.
pinchZoom.setTransform({
scale: 1,
x: 0,
y: 0,
allowChangeEvent: false,
});
Scale in/out of a particular point.
pinchZoom.scaleTo(scale, {
originX: 0,
originY: 0,
relativeTo: 'content',
allowChangeEvent: false,
});
Demo
Simple image pinch-zoom. Although you can put any element in <pinch-zoom>
.
Files
lib/index.ts
- Original TypeScript.dist/pinch-zoom.mjs
- JS module. Default exports PinchZoom
.dist/pinch-zoom.js
- Plain JS. Exposes PinchZoom
on the global.dist/pinch-zoom-min.js
- Minified plain JS. 2.3k gzipped.