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

You’ll see great web development tutorials on this site.

After the success of PSDTUTS, they launched this.

NETTUTS

My favorite articles on this site is…

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Create a Slick Tabbed Content Area using CSS & jQuery

It depending on your idea, you can integrate those script on your site or blogs.

I also find some UI Patterns you may be interested in.

The Highly Extensible CSS Interface

Tutorials and demos about extensible css, visual jQuery and ajax interactivity. You can download sample file!

UI-patterns.com

User Interface Design Pattern Library. UI patterns for web designers. See examples and read rationale, solutions, and implementations for each pattern.

Yahoo! Design Pattern Library

Yahoo! Design Pattern Library. Each patterns have a movie so it’s really esay to see.

Interaction Design Pattern Library – Welie.com

A bunch of Design Patterns!

Konigi

Konigi is a resource for user experience designers. They showcase examples of interface and visual design in their galleries

blink design library

Blink Interactive is a Seattle-based user experience consulting firm. Their design library is an informal collection of design examples with commentary.

Collection: [Design Solutions] | flickr

You can see flickr for design patterns as well. You may also see here or here.

Actually, this technique is used for YouTube Player as well.

Here is the list of CSS Sprite Technique Samples.

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image.

Check it out the AFTER example.

We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.

2. Image Sprite Navigation With CSS

You can see the basic CSS Sprite Technique sample for Navigation.

3. Advanced CSS Menu

WebDesignerWall shows you creative CSS Sprite Menu. You can download the sample file.

4. Dragon Interactive

This is a sample of using jQuery and CSS Sprite. That’s amazing Menu.

This is a sprite image for the menu.

5. JavaScript Sprite Animation Using jQuery

Here is another sample of using jQuery and CSS Sprite. That’s really clever idea!

12 page sprite

the page-turning part

Here is the demo.

6. CSS Sprite Generator

CSS Sprite Generator is an online tool to help automate the process of generating CSS sprites. Given a ZIP file containing 2 or more images (GIF, PNG or JPG), it will generate a sprite image and the corresponding CSS rules to target and display each compo

A further stage in the use of a css image map.

Just hover your mouse over the painting to reveal three areas of interest. Then hover over each area to reveal an enlarged detail with text.

This method could be used on an educational site to give information and enhanced details of images in general.

The idea is based on my previous image maps but takes it a step further in functionality.

Works in IE5.5 and almost works in IE5.01

2. How to Create Flick Animations with CSS

This is a method of animation that requires some interaction with your visitors, making a visit to your web site a more enjoyable experience for them, and maybe tempting them to come back for more.

FLICK ANIMATION is 100% CSS and DOES NOT use javascript

3. FACE: Faruk’s Animated CSS Enhancements

FACE was developed to allow standards-compliant web developers to put more life and energy into their pages, without having to learn Javascript or Flash: all it takes is basic math skills and a good understanding of CSS. FACE is built entirely from JavaScript and the CSS that you provide to control the animation.

4. CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

5. css: add a loading icon to your larger images

Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading.

You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.

6. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

8. Checkmark Your Visited Links with Pure CSS

You can take control of the styling of these anchor elements in your CSS by targeting them with pseudo classes. The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator.

9. footerStick

I’m going to show you all how to force the footer of a webpage to stick to the bottom of the viewport. This is a pretty advanced CSS method and requires that you know a bit about how CSS works.

10. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

11. Create a Lightbox effect only with CSS – no javascript needed

There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.

This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.