Any Element Zoom JavaScript Library – zoom.js

Preview:

Description:

zoom.js is a lightweight JavaScript zooming library that enables users to zoom in on any DOM element in your document.

How to use it:

1. Download and import zoom.js.

<script src="js/zoom.js"></script>

2. Zoom in on an element within the document.

zoom.to({
  element: document.querySelector('#element'),
});

3. Zoom in on a specified portion of a web page.

zoom.to({
  x: 100,
  y: 200,
  width: 400,
  height: 300,
});
// OR
zoom.to({
  x: 100,
  y: 200,
  scale: 3,
});

4. Set the space around the element.

zoom.to({
  element: document.querySelector('#element'),
  padding: 10,
});

5. Trigger a function after zooming in on an element.

zoom.to({
  element: document.querySelector('#element'),
  callback: function() {
    // do something
  }
});

6. This example shows how to zoom in on an element when getting clicked.

document.querySelector( 'body' ).addEventListener( 'click', function( event ) {
  event.preventDefault();
  zoom.to({ element: event.target });
});