jquery Pan.js Proportional Panning Example

The proportional panning mode 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.

<style type="text/css">
    #container {
        position: relative;
        width: 250px;
        height: 250px;
        border: 1px #bb3300 solid;
        float: left;
    }

    #content {
        position: relative;
        width: 500px;
        height: 500px;
        background-image: url('../img/tshirt.jpg');
    }
</style>

<div id="container">
    <div id="content"></div>
</div>

<script type="text/javascript">
    $('#container').pan({
        mouseControl: 'proportional',
        autoSpeedX: 1,
        autoSpeedY: 2
    });
</script>