jQuery.SerialScroll

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

Introduction

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.

What's it for ?

jQuery.SerialScroll doesn't have one definite purpose. It's generic and adaptable. You can certainly use it as a screen slider. That is, to sequentially navigate a group of screens.
This plugin can also animate a text scroller in no time.
It can definitely handle slideshows, the high customizability of the scrolling effect lets you create beautiful animations.
You can even build an automatic news ticker!
Three of these uses are exemplified in the demo.
Remember, it's not restricted to these situations. It will take care of any collection of html elements that you want to scroll consecutively.

Settings and customization

jQuery.SerialScroll gives you access to a lot of options.
These are:

• target

  The element to scroll, it's relative to the matched element.
  If you don't specify this option, the scrolled element is the one you called serialScroll on.

• event

  on which event to react (click by default).

• start

  first element of the series (zero-based index, 0 by default).

• step

  how many elements to scroll each time. Use a negative number to go on the other way.

• lock

  if true(default), the plugin will ignore events if already animating. Then animations can't be queued.

• cycle

  if true, the first element will be shown after going over the last, and the other way around.

• stop

  if true, the plugin will stop any previous animations of the element, to avoid queuing.

• force

  if true, an initial scroll will be forced on start.

• jump

  if true, the specified event can be triggered on the items, and the container will scroll to them.

• items

  selector to the items(relative to the scrolled element).

• prev

  (optional)selector to the 'previous' button.

• next

  (optional)selector to the 'next' button.

• lazy

  if true, the items are collected each time, allowing dynamic content(AJAX, AHAH, jQuery manipulation, etc).

• interval

  If you specify a number, the plugin will add auto scrolling with that interval.

• constant

  Should the speed remain constant, no matter how many items we scroll at once ? (true by default).

• navigation

  Optionally, a selector to a group of elements, that allow scrolling to specific elements by index. Can be less than the amount of items.

• excludenew

  If you want the plugin, to stop scrolling before the actual last element, set this to a number, and that amount of items is ignored counting from the end.
  This is useful if you show many items simultaneously, in that case, you probably want to set this option to the amount of visible items - 1.

• onBefore

  A function to be called before each scrolling. It receives the following arguments: event object, targeted element, element to be scrolled, collection of items and position of the targeted element in the collection.
  The scope(this) will point to the element that got the event. If the function returns false, the event is ignored.

Also, you can use jQuery.ScrollTo's settings!
Check its demo to see all of them.

The option 'target'

This option is a new addition, included since 1.2.0.
Before, you needed to call the plugin once for each scrolled element.
When this option is specified, the matched elements are no longer the scrolled elements, but a container.
In this case, the selectors of prev, next, navigation and target will be relative to this container, allowing you to call SerialScroll on many elements at once.

External manipulation, event triggering

jQuery.SerialScroll automatically binds 3 events to the containers.
These are:

• prev.serialScroll

  Scrolls to the previous element.

• next.serialScroll

  Scrolls to the next element.

• goto.serialScroll

  Scrolls to the specified index, starts with 0.

• start.serialScroll

  (Re)starts autoscrolling.

• stop.serialScroll

  Stops the autoscrolling.

• notify.serialScroll

  Updates the active item.

This looks confusing, but it's not. You use it like this:

$(container).trigger( 'prev' );

$(container).trigger( 'next' );

$(container).trigger( 'goto', [ 3 ] );

$(container).trigger( 'start' );

$(container).trigger( 'stop' );

$(container).trigger( 'notify', [ 4 ] );

'notify' also accepts a DOM element(item), or any of its descendants.
$(container) is the element that gets scrolled each time. If you specified a 'target', then that element, else, the element you called the plugin on.
Note that to use 'start' and 'stop' you need to use the option 'interval' first.
If your container element already has any of these event names bound(odd!), then just add the namespace when you trigger.
You probably won't need to deal with these events, but if so, this is how.

What makes jQuery.SerialScroll so special ?

This plugin has many positive features, of course, it won't fit everyone's needs. That's impossible.

• Small Footprint

  This plugin is tiny, as said before, it requires jQuery.ScrollTo. Both plugins together, take less than 3.5kb minified.
  If by chance, you decide to include jQuery.LocalScroll, the 3 of them require less than 5kb. Including this plugin is not a bad idea, it can be used, instead of the option 'navigation' to build a widget with sequential and random scrolling.

• Highly customizable

  This plugin has many settings to customize, in addition, it can use jQuery.ScrollTo's settings. That makes 27 different options!
  If you take a while to analyze them all, you can make your work really unique.

• Accessible, degrades gracefully

  Probably many will automatically skip this part, shame on you!
  If you make sure non-javascript users will see the scrollbars, then they can perfectly navigate your content. You can show the scrollbars only for these few users, easily, using css/js.
  This is one of the main differences with many similar scripts, they generate the content and the styling using javascript.

• Adaptable

  jQuery.SerialScroll won't alter the html or styles at all.
  You are in control of the styles and content of your collections. You don't need the plugin to decide what html to use, or how many items to show simultaneously, and you can safely change that yourself, the plugin will always work.
  The items don't need to have fixed size, nor to be aligned. SerialScroll will scroll from one to the other, no matter what.
  If you want a plugin with premade styles or automatic generation of html, then you should consider any of jQuery carousels.

• Generic and reusable

  Finally, as mentioned before, this plugin can be used for many different situations and doesn't have one specific application.

Links

• Downloads
• Main Post
• Github Repo
• Demo
• jQuery.ScrollTo
• jQuery.ScrollTo's demo