Author: | cmorillas |
---|---|
Views Total: | 4,033 views |
Official Page: | Go to website |
Last Update: | April 3, 2021 |
License: | MIT |
Preview:

Description:
Panzoom is a lightweight JavaScript library (ES6) for panning & zooming any elements within a container.
Supports mouse drag, mouse wheel, and touch gestures.
How to use it:
1. Import the Panzoom into the document.
import {panzoom} from './src/panzoom.js';
// OR <script src="./dist/panzoom.min.js"></script>
2. Pan and Zoom with inner bounds.
<div id="container"> <div id="example">Element To Pan And Zoom</div> </div>
panzoom('#example');
3. Pan and Zoom with outer bounds.
panzoom('#example', { bound:'outer' });
4. Pan and Zoom without bounds.
panzoom('#example', { bound:'none' });
5. Enable/disable pan & zoom behaviors.
panzoom('#example', { pan: true, zoom: true });
6. More configuration options.
panzoom('#example', { wheel_step: 0.2 // 0.01 - 0.4 scale_min: 0.01, // 0.01 - 20 scale_max: 10, // 0.01 - 20 });