Drag and zoom any element
View the demo.
Panzoom is a small library to add panning and zooming functionality to an element. Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.
Mobile support
Panzoom uses [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) and falls back to touch and mouse events.
It even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers.
SVG support
Panzoom supports panning and zooming SVG elements directly, with the caveat that CSS transitions on SVG do not work in IE.
More info
Panzoom is incredibly customizable. Some features include:
- Focal point zooming using a mousewheel on desktop and pinch gestures on mobile.
- Disabling all combinations of panning and zooming (There's not a lot of overhead if using this plugin just for dragging or zooming alone).
- Containing the panzoom element within it's parent.
- Events
For more information, documentation is available in the README.