Zoom Any Element Within The Document – zoomerang.js

Category: Javascript , Recommended , Zoom | December 17, 2019
Views Total:3,388 views
Official Page:Go to website
Last Update:December 17, 2019


Zoom Any Element Within The Document – zoomerang.js


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.

  // options here
<span class="zoom">Click Me</span>
<img class="zoom" src="1.jpg" />

3. Possible options.

  // 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

4. Callback functions.

  onOpen: null,
  onClose: null,
  onBeforeClose: null,
  onBeforeOpen: null

You Might Be Interested In:

Leave a Reply