DESIGNwalker max

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.

1. jQuery pageSlide

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.

2. Slider Gallery

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

3. BarackSlideshow – An elegant, lightweight slideshow script

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

4. Accessible News Slider

Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.

5. Start/Stop Slider

The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left =).

demo page

6. mooSlide

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

7. Coda Slider Effect

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

8. Sliding Tabs

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

9. Coda-Slider

Coda-Slider is a tabbed sliding div type thing, like Panic have on their Coda site.

10. Creating a Slick Auto-Playing Featured Content Slider

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

11. Build An Incredible Login Form With jQuery

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

12. Carousel

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

13. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.

14. Scroll your HTML with jquery scrollable

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!

1. youlove.us

2. tap tap tap ~ tasty bits for your iPhone

3. Viget Labs Is Hiring

4. Panic – Coda – One-Window Web Development for Mac OS X

5. IL FRUTTETO

6. Lucuma | Audiovisual

7. Engage Interactive

8. Goodworks Media

9. Danny Blackman // est. 1985

10. NOFRKS.design

11. Qlear Interaction Design

12. Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive

13. Web Design Belgrade

14. www.MelissaHie.com

15. volll

16. CSS Brigit | Fuente de Inspiración

17. IJsfontein

18. sourcebits

19. VivaViralVideo.com

20. Hotel Oxford – Timisoara

21. The portfolio of Bryan Katzel

Tags: inspiration, JavaScript