simplyScroll is a scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizontally or vertically, backwards or forwards.
NEW FEATURES IN V2
- Auto-scroll in either direction
- RTL support, normalises browser RTL scroll implementations
- Touch support
- Now automatically supports unequal sized elements in loop mode
- Pause/play button option
FEATURES
- Supports scrolling horizontally and vertically both forwards and backwards
- Uses DOM ScrollTop/ScrollLeft for optimal performance
- Supports looped scrolling (infinite effect)
- Fully customisable via CSS & HTML
- Supports jQuery 1.2.6 and higher (tested up to 1.7.1)
- Works on all major browsers (including IE6/7!)
EXAMPLES
- Horizontal scroll with loop (infinite effect)
- As above but manual scroll with buttons
- Manual Vertical scroll, with buttons, looped
- Custom HTML example, scrolling backwards
- RTL mode page may look odd (or better)!
- Pause and resume
DOWNLOAD
simplyScroll is open source and dual licensed under MIT and GPL licenses. Latest version simplyScroll 2.0.5 released 10/05/12
| jquery.simplyscroll.zip | 30 Kb | Recommended Complete package including CSS & buttons.png |
| jquery.simplyscroll.js | 13 Kb | Source |
| jquery.simplyscroll.min.js | 8 Kb | minified (uncompressed) |
CONFIGURATION
simplyScroll can be configured with a number of options
| Property | Default | Description |
|---|---|---|
| customClass | 'simply-scroll' | Class name for styling |
| frameRate | 24 | Number of movements/frames per second |
| speed | 1 | Number of pixels moved per frame, in 'loop' mode must be divisible by total width of scroller |
| orientation | 'horizontal' | 'horizontal or 'vertical' - not to be confused with device orientation |
| direction | 'forwards' | 'forwards' or 'backwards' |
| auto | true | Automatic scrolling, use false for button controls |
| autoMode | 'loop' | auto = true, 'loop' or 'bounce', (disables buttons) |
| manualMode | 'end' | auto = false, 'loop' or 'end' (end-to-end) |
| pauseOnHover | true | Pause scroll on hover (auto only) |
| pauseOnTouch | true | Touch enabled devices only (auto only) |
| pauseButton | false | Creates a pause button (auto only) |
| startOnLoad | false | Init plugin on window.load (to allow for image loading etc) |
COMMENTS / FEEDBACK
Notes/issues:
simplyScroll jumping? Make sure you specify images sizes or start on window load (Chrome is especially affected by this - it's just so darn fast!)
You can't use auto scrolling with buttons (yet - speed-up is a planned feature)
There's a bug in Chrome 17 (released Feb 12) that returns a false positive on a touch support test (causing hover events not to be setup), version 2.0.3 fixes this.
Any feedback or bugs should be directed to @logicbox orwill@logicbox.net. Enjoy!
0 comments:
Post a Comment