Bringing Back Scrollers With jQuery
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. Demo Vertical News Ticker - Download Vertical News Ticker
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. Demo IntroViewPort Scroller - Download IntroViewPort 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.
Demo jStockTicker - Download jStockTicker
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. Demo Smooth DIV Scroll - Download Smooth Div Scroll
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). Demo simplyScroll - Download simplyScroll
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. Demo Multidirections Image Scroller - Download Multidirections Image Scroller
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). Demo Simple Scroller - Download Simple Scroller
Stay up to date on the latest Internet trends:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.