Smooth DOM Panning & Scrolling Plugin - jquery Pan.js

File Size: 404 KB
Views Total: 1708
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth DOM Panning & Scrolling Plugin - jquery Pan.js

A multi-functional jQuery Pan plugin which implements smooth pan and scroll functionalities on any DOM element.

Features:

  • Auto pans (scrolls) an element when your cursor hovers over the edge of the element. Live Demo
  • Kinetic scrolling: Applies a Kinetic Scrolling effect to elements on mouse drag. Live Demo
  • Proportional panning: Pans a DOM element inside a given container using mouse movement. Live Demo

How to use it:

1. Load the main script jquery.pan.js after jQuery library and we're ready to go.

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

2. Create a proportional panning effect on your content. It is best suited for situations where you have content that needs to be available for a user to quickly scan and absorb, but only a limited amount of screen space in which to display it (a similar mechanic is seen in t-shirt design previews in online stores). When the mouse is outside the image it will pan both horizontally and vertically as both the autoSpeedX and autoSpeedY options are set. Note that this is not unique to this example - all scroll types and options will operate both vertically and horizontally if there is sufficient room to do so. You can control the level of smoothing applied to the panning movement by setting the proportionalSmoothing option to a value between zero and one. In this example, the default of 0.5 is applied. Higher values will result in a slower, smoother movement whereas values closer to zero will make the panning movement feel more responsive.

<div id="container">
  <div id="content"></div>
</div>
#container {
  position: relative;
  width: 250px;
  height: 250px;
  border: 1px #bb3300 solid;
  float: left;
}

#content {
  position: relative;
  width: 500px;
  height: 500px;
  background-image: url('bg.jpg');
}
$('#container').pan({
  mouseControl: 'proportional',
  autoSpeedX: 1,
  autoSpeedY: 2
});

3. Apply a Kinetic scrolling effect to a list. If you release the mouse whilst panning, you'll see the list continue to scroll with the speed you gave it whilst dragging. The kineticDamping option controls how quickly the content will come to rest after being released whilst in motion

<div id="container">
  <div id="content">
    <div class="contact">
      <p>John Snow</p>
      <a href="#">[email protected]</a>
    </div>
    ... More Content Here ...
  </div>
</div>
#container {
  border: 1px #ff8800 solid;
  width: 200px;
  height: 450px;
  overflow: hidden;
  position: relative;
}

#content {
  width: 200px;
  background-color: #333333;
  position: absolute;
  left: 0px;
  top: 0px;
  padding:  0px;
  margin: 0px;
}

.contact {
  height: 50px;
  width: 190px;
  border-radius: 3px;
  background-color: #777777;
  padding: 0px;
  margin: 5px 5px 15px 5px;
}
$('#container').pan({
  kineticDamping: 0.85
});

4. Apply a Edge Panning effect to your content. Notice how you can control how the image pans by moving your mouse to the left and right edges. By setting the mouseControl option to 'edge', panning will be initiated when the user moves their mouse to the image border. When the mouse is not over the image it will automatically pan horizontally; this behaviour is controlled by the autoSpeedX option.

<div id="container">
  <div id="content"></div>
</div>
#container {
  position: relative;
  width: 850px;
  height: 494px;
  border: 1px #4444ff solid;
  overflow: hidden;
}

#content {
  position: relative;
  width: 1692px;
  height: 494px;
  background-image: url('bg.png');
}
$('#container').pan({
  mouseControl: 'edge',
  mouseSpeed: 15,
  autoSpeedX: 2
});

5. All default configuration options

$('#container').pan({
  'autoSpeedX'            : 0,
  'autoSpeedY'            : 0,
  'mouseControl'          : 'kinetic',
  'kineticDamping'        : 0.8,
  'mouseEdgeSpeed'        : 5,
  'mouseEdgeWidth'        : defaultMouseEdge,
  'proportionalSmoothing' : 0.5,
  'updateInterval'        : 50,
  'mousePan'              : null
});

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