Sunday, November 10, 2013

simplyScroll v2

  • Firehouse
  • Chloe nightclub
  • Firehouse bar
  • Firehouse chloe club fishtank
  • Firehouse restaurant
  • Firehouse
  • Firehouse
  • Chloe nightclub

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

  1. Horizontal scroll with loop (infinite effect)
  2. As above but manual scroll with buttons
  3. Manual Vertical scroll, with buttons, looped
  4. Custom HTML example, scrolling backwards
  5. RTL mode page may look odd (or better)!
  6. 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 KbSource
jquery.simplyscroll.min.js 8 Kbminified (uncompressed)

CONFIGURATION

simplyScroll can be configured with a number of options

PropertyDefault Description
customClass 'simply-scroll' Class name for styling
frameRate 24Number of movements/frames per second
speed 1Number 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 trueAutomatic 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 truePause scroll on hover (auto only)
pauseOnTouch trueTouch enabled devices only (auto only)
pauseButton falseCreates a pause button (auto only)
startOnLoad falseInit 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!

No comments:

Post a Comment