Content panning based on mouse movement, a cool way to replace scrolling for large images or full pages.
Requires Mootools Core 1.4.1 or later.
First of all, include in your page Mootools 1.4.1 or later, and Panner.js source.
<script type="text/javascript" src="Mootools.js"></script> <script type="text/javascript" src="Panner.js"></script>
Place the content you want to pan inside a smaller container (can be the main body too), like this:
<!-- Small container --> <div style="width: 600px; height: 200px;"> <!-- Big content --> <div id="content" style="width: 1200px; height: 600px;"> Lorem Ipsum dolor sit amet. </div> </div>
Then, in your Javascript:
$('content').panner();
Syntax:
var myPanner = new Panner(content, options);
Options:
Methods:
Element and Elements methods:
You can use some shortcut methods on Element and Elements for creating the Panner quickly.
$$('img').panner(options); // Attach Panner to all images
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus