Panoscroll version 2 is here! It includes such nice features as jQuery 1.4.2 compatibale, a newer, nicer interface, smaller, more efficent code, and kittens.
| Option | Default | Values | Description |
|---|---|---|---|
| direction | Left | Left, Right, Up, Down | Controlls the direction to be scrolled, default is Left. Yes, the first letter must be capial |
| scrollSpeed | 60 | integer or string | The speed at which the background is scrolled, can be an interger value, or a string. example: scrollSpeed: 100 would be 100 miliseconds scrollSpeed:'3s' would be 3 seconds, or 3000 miliseconds accepts:
|
| originalPos | 0 | integer | The starting position of the background. It must be an integer, so if you start it at the top you use "0" if you start it at the "bottom" you need to know the dimensions of your background |
| numPx | 1 | integer | The number of pixles the background will move at a time. |
| auto | false | boolean | Will begin scrolling automatically on page load |
| autoControl | false | boolean | Will put the controls on an automatically scrolling div. By default the controlls are not added, making the scrolling uncontrolable by the user |
| showSpeed | false | boolean | Prints out the current position of the background in a div overlying it. |
Using panoscroll is simple. The most basic you can do is just call panoscroll() on something with a background.
$("#demoH").panoscroll();
If you want to get into the options, those are simple too:
$("#demoAuto").panoscroll({auto:true,scrollSpeed:3000,numPx:50});
/*Panoscroll v2.0 CSS*/
.pan { margin:5px; padding-top:15px; padding-bottom:5px; }
.panView { position:relative; color:#000; }
.sUp, .sLeft, .sDown, .sRight, .sPause
{ height:36px; width:37px; text-indent:-9000px; cursor:pointer; display:inline-block; }
.sLeft { background:url(img/controls-v2.png) no-repeat -3px -3px;
position:absolute; left:25px; top:15px; }
.sLeft:hover { background-position:-3px -41px; }
.sRight { background:url(img/controls-v2.png) no-repeat -40px -3px;
position:absolute; left:150px; top:15px; }
.sRight:hover { background-position:-40px -41px; }
.sUp { background:url(img/controls-v2.png) no-repeat -78px -3px;
position:absolute; left:25px; top:15px; }
.sUp:hover { background-position:-78px -41px; }
.sDown { background:url(img/controls-v2.png) no-repeat -116px -3px;
position:absolute; left:150px; top:15px; }
.sDown:hover { background-position:-116px -41px; }
.sPause { background:url(img/controls-v2.png) no-repeat -155px -3px;
position:absolute; left:88px; top:15px; }
.sPause:hover { background-position:-155px -41px; }
.showSpeed { position:absolute; right:10px; top:10px;
background:rgba(255,255,255,0.5); }
$("#demoH").panoscroll();
$("#demoV").panoscroll({
direction: 'Up',
scrollSpeed: '1s',
numPx: 100,
showSpeed: true
});
$("#demoSlow").panoscroll({
scrollSpeed: 400,
numPx: 30,
originalPos: 500,
showSpeed: true
});
$("#demoAuto").panoscroll({auto:true});
PanoScroll is licensed under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or higher.http://www.gnu.org/licenses/