Zoom Any Element Within The Document – zoomerang.js

Category: Javascript , Recommended , Zoom | December 17, 2019
Author: yyx990803
Views Total: 3,144 views
Official Page: Go to website
Last Update: December 17, 2019
License: MIT

Preview:

Zoom Any Element Within The Document – zoomerang.js

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');

You Might Be Interested In:


Leave a Reply