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
