jQuery Plugin To Pan Html Element within Viewport - Porthole

Porthole is a jQuery plugin which allows the visitor to pan html elements inside a specified viewport using mouse drag or touch gestures, based on CSS3 transforms.

How to use it:

1. Add the latest version of jQuery library and the jQuery Porthole plugin to your web pages.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.porthole.js"></script>

2. The html structure.

<div id="viewport">
  <div class='element-to-pan'></div>
</div>

3. Call the function on the top element to enable the plugin.

$('#viewport').porthole({

  // start points
  start : [334, 97],

  // callback function
  callback: function() {
    console.log('loaded');
  }
  
});

Change log:

2015-10-13

• bugfix
• es6 modules support

---

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