Martyn's Moopan

Moopan provides mouseover activated panning for divs using mootools 1.2+

These examples use moopan.js and mootools.js (version 1.2+). i.e.

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/moopan.js" type="text/javascript"></script>

The first example picks up all divs with class="moopan_both" and applies the effect using no explict javascript, just the class.

<div class="moopan_both" style="width: 700px; height: 200px;">
		<img src="http://www.regenerationgallery.lowtech.org/images/part1.jpg" alt="">
	</div>

second uses class="moopan_vert"

Third uses class="moopan_horz"

forth is set up using an explicit id (in this case id="moopan" and explicit javascript which allows explicit options to be used, same effect can be done to any group of divs using similar code to that at the end og moopan.js

window.addEvent("domready", function() {
  $("moopan").moopan({fDeadZone: [0, 1],fStartProportion: [0.5, 0.5], iSecondsAtTopSpeed: [4, 4]});
});
  
the available options and their defaults are
    fStartProportion: [0, 0], //The start position from 0 -1  [X, Y]
    iFPS: 16, //Frames per second
    iSecondsAtTopSpeed: [2, 2], // how long from one extreme to the other at full speed [X, Y]
    fDeadZone: [0.3, 0.3], // the size of the central dead zone 0  = no dead zone 1 turns off scrolling for that direction [X, Y]