Zoom Any Element Within The Document – zoomerang.js

Preview:

Description:

zoomerang.js is a JavaScript zoom library created by Evan You (the author of Vue.js) that makes it easier to zoom in any DOM elements within the document.

How to use it:

1. Download and import the zoomerang.js library into the HTML file.

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

2. Initialize the library and apply the zooming functionality on target elements.

Zoomerang.config({
  // options here
}).listen('.zoom');

<span class="zoom">Click Me</span>

<img class="zoom" src="1.jpg" />

3. Possible options.

Zoomerang.config({
  // transition duration
  transitionDuration: '.4s',
  // easing function
  transitionTimingFunction: 'cubic-bezier(.4,0,0,1)',
  // background color
  bgColor: '#fff',
  // opacity
  bgOpacity: 1,
  // max width
  maxWidth: 300,
  // max height
  maxHeight: 300
  
}).listen('.zoom');

4. Callback functions.

Zoomerang.config({
  onOpen: null,
  onClose: null,
  onBeforeClose: null,
  onBeforeOpen: null
  
}).listen('.zoom');