Momentum Panning and Zooming Effect With jQuery - zoom3d

zoom3d is a simple jQuery plugin that enables momentum panning and zooming effects on your html content in mobile browsers.

How to use it:

1. Include both jQuery JavaScript library and the jQuery zoom3d plugin on your webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.zoom3d.js"></script>

2. Wrap the html content into the container 'zoom3d'.

<div class="zoom3d">
  <div class="content">
      ...
  </div>
</div>

3. Just call the function on the top container and done.

$(".zoom3d").zoom3d({
  content: ".content",
  translate3d: true
});

4. Plugin's default settings.

$(".zoom3d").zoom3d({
  accelerationRatio: 0.0005,
  content: "",
  doubleClickTime: 200,
  bounceLimit: 100,
  maxScale: 2,
  midScale: 1,
  momentumTime: 200,
  translate3d: false
});

Changelog:

2016-10-17

• Minor refactoring and optimization

2016-02-12

• bugfix

---

This awesome jQuery plugin is developed by riomyers. For more Advanced Usages, please check the demo page or visit the official website.