Marketing Insights and News | Website Magazine: Digital Marketing Tips and Blog

Bringing Back Scrollers With jQuery

Written by Pete Prestipino | Oct 8, 2009 5:00:00 AM

Remember scrollers? I do and have missed them terribly since they went out of design vogue.


While there are some holdouts to this traditional design element, using jQuery to scroll text or images adds the necessary Web 2.0 coolness you'll need if you don't want to get laughed out of your next design meetup. Here are some of the best jQuery plugins available to add element/content scrolling to web pages. 

Vertical News Ticker: A very simple jQuery plugin that can be used to automatically scroll content vertically. Options include controls for speed of the scrolling animation, pausing (waiting between scrolling, how many items to show, fade in animations and a mousePause which stops scrolling on mouse over.]

IntoViewPort Scroller: A rather elegant jQuery plugin for scrolling to a certain DOM-element (but only if the element is not already in the browser's view port). Scroll effects are customizable as are the other animations. Be prepared - this is not your typical scroller.

jStockTicker: Another simple plugin which animates a div containing a sequence of spans. When the second visible span reaches the edge of the visible area, the first span is appended to the end of the list. 

Smooth DIV Scroll: Perhaps the best jQuery scroller we've come across, Smooth Div Scroll scrolls content horizontally left or right. Since the scrolling is done using hot spots within the scrollable area or via autoscrolling, there are no visible buttons resulting in an unobtrusive and smooth user experience. Ideal for standard scrolling text, it can also be used for image galleries, stock tickers or should you have special navigation requirements. 

simplyScroll: Our favorite of the jQuery scrollers on this list, simplyScroll animates a set of elements either automatically or manually, horizontally or vertically and even features an infinite/continuous scroll mode. The best part of course is that the plugin accepts dynamic image input via a Flickr feed or a local JSON source. Speed and frame rate are configurable (which is key because the plugin is performance intensive). 

Multidirections Image Scroller: The possibilities are endless with this simple solution. The Multidirections Image Scroller enables designers/developers to create an image scroller with mouse events and features horizontal and vertical scroll and stop/start on mouse events (in and out). The plugin preloads images and its parameters can be configured for speed, direction and to include a preload label.

Simple Scroller: A modified approach to scrolling is Simple Scroller which converts sets of div elements into a scrolling content area and generates pagination links. While it 's not your typical scroller, it can be used in some innovative ways to present content (perhaps even as a standalone element of a website itself).