Recreate iPhone Swipe Effect using jQuery

Being a PC user for as long as I can remember it pains me to say this; if there’s one thing Apple does well it’s the User Interface (UI). When the iPhone was first released it really shook up the mobile market, with a touch screen interface and a tonne of applications to expand its functionality, it forced the other mobile phone manufacturers to play catch-up.

Something that comes naturally when you start to use the iPhone is the swipe between screens, allowing you to quickly view all your different applications. Just out of interest I decided to recreate this effect for the web using jQuery. Is it of any use to anyone? I doubt it, as it isn’t very natural to swipe using the mouse (unless you’re used to using mouse gestures). But I enjoyed putting it together.

If you swipe left/right toward a panel that doesn’t exist, it simply bounces back. The same goes for small mouse movements; the full animation will only occur when you swipe over a third of the width of a panel. View a demo.

Update: As requested by Matias I’ve added an indicator to show the total number of panels and the currently selected panel.

Update 2: For those of you who hate how the text is sometimes selected on drag (I do), you may want to take a look at this thread from Stackoverflow for a potential solution.