Jump to: [Features] [Examples] [Download] [Configuration] [Comments]
simplyScroll is a jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically. It can also accept dynamic image input via a Flickr feed (note not full API integration) or a local JSON source. This plugin can be performance intensive, so speed and framerate are fully configureable to accomodate lower spec systems.
Features
- Supports scrolling both horizontally and vertically
- Uses DOM ScrollTop/ScrollLeft for optimal performance
- Supports looped scrolling (infinite effect)
- Fully customisable via CSS & Semantic (X)HTML
- Flickr Feed integration
- Tested on jQuery 1.2.6, 1.3.X and 1.4
- Browser tested in Chrome, Firefox, Safari, Opera 9+ & IE6+
- Restriction: Scrolled elements must have the same width/height, does not support dynamic (ie ajax) content updates
Examples
- Horizontal with loop scroll (infinite effect)
- As above but manual scroll with buttons
- Manual Vertical scroll, with buttons
- Flickr feed, manual with overlayed buttons
- Custom HTML example
Download
simplyScroll is open-source and dual licensed under MIT and GPL licenses. Latest version simplyScroll 1.0.4 released 03/07/09
Changes in version 1.0.4
Removed the dependency on $(window).load() for initialisation. If needed this mode can now be invoked by passing a 'startOnLoad: true' paramater. Also removed the confusing and edge case option 'loopOverload'. Finally simplyScroll can now cope with margins on list items!
| jquery.simplyscroll.zip | 11 Kb | Recommended Complete package including CSS & buttons.png |
| jquery.simplyscroll.js | 7 Kb | Source |
| jquery.simplyscroll.min.js | 5 Kb | minified (uncompressed) |
Configuration
simplyScroll can be configured with a number of options
| Property | Default | Description |
|---|---|---|
| className | 'simply-scroll' | Class name for styling |
| frameRate | 24 | Number of movements/frames per second |
| speed | 1 | Number of pixels moved per frame |
| horizontal | true | Direction of movement: false for vertical |
| autoMode | 'off' | 'loop' or 'bounce' (disables buttons) |
| pauseOnHover | true | Pause scroll on hover (auto only) |
| startOnLoad | false | Use this if encountering rendering problems on Safari 3?/Mac OSX |
| flickrFeed | '' | URL of flickr feed to use for Image JSON |
| jsonSource | '' | Local URL for JSON image data (see source code) |
| jsonImgWidth | 240 | Image width for Flickr/JSON data only |
| jsonImgHeight | 180 | Image height for Flickr/JSON data only |
Comments / Feedback
Any feedback or bugs should be directed to @logicbox or will@logicbox.net. Enjoy!
Images used on this page are courtesy of Key-2 Luxury / Firehouse