Jump to: [Features] [Examples] [Download] [Configuration] [Comments]
TweetsimplyScroll 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 (released 01/02/12)
- 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
More examples coming soon!
- Horizontal with loop scroll (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)!
Download
simplyScroll is open-source and dual licensed under MIT and GPL licenses. Latest version simplyScroll 2.0.1 released 01/02/12
| jquery.simplyscroll.zip | 23 Kb | Recommended Complete package including CSS & buttons.png |
| jquery.simplyscroll.js | 11 Kb | Source |
| jquery.simplyscroll.min.js | 7 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) |
| pauseOnToch | 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
Any feedback or bugs should be directed to @logicbox or will@logicbox.net. Enjoy!
Notes:
You can't use autoMode with scroll buttons
Images used on this page are courtesy of Key-2 Luxury / Firehouse
