I love sliding effect. There are so many web sites that have dynamic animated sliding effect as if the site is created by flash.
For this post, you’ll see 14 Scripts to create a sliding effect and over 20 web sites that have nice sliding effects.
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.
This product slider is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.
demo page
It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.
demo page
Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.
The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left =).
demo page
Due to many requests to revamp this tool for mootools version 1.2, here you go, the slider is now available for this version, and can be downloaded
The sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it.
demo page
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.
demo page
Coda-Slider is a tabbed sliding div type thing, like Panic have on their Coda site.
The Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content.
demo page
What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.
demo page
The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation.
demo page
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.
Use mouse, mousewheel or keyboard arrows to scroll through these elements.
Slide Effect Web Design Inspirations
Using slide effect properly, you’ll be able to create following sites!
