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: I’ve uploaded a ZIP file here containing all the code used.

Update 3: 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.

Matias on March 19 10 / 77 Permalink

Very cool! is it possible to add some bullets in the down side so you can know how much items yo have?

Great Work!

Matt on March 19 10 / 77 Permalink

Hey Matias,
Great idea, I forgot about the little dots at the bottom of the UI, I’ll add those a.s.a.p. for you.

Adil on July 19 10 / 199 Permalink

nice plugin, but it’s possible to put a zip file or check your css file beacause the server is down
thanks in advance :)

Matt on July 19 10 / 199 Permalink

Hi Adil,
Thanks for the comment, it’snot really a plug-in but it should be easy to see how it works. It was more of an experiment.

I’ve updated the post with a zip file as requested.

Iain van der Wiel on December 21 10 / 354 Permalink

Hey Matt,

Nice plugin! I came across this and thought this was exactly what I needed for an iPad web app we’re making for a client, but i saw i acted on mouse events and not on touch events. I tried binding the touch events to the plugin, but it didn’t work, the divs don’t slide when dragging them on the ipad. Would you care to help me out a bit?

I’m using these events: touchstart, touchmove and touchend. Thx in advance!

Matt on December 22 10 / 355 Permalink

Hi Iain,

That could be quite difficult as I don’t actually own an iPad to test the plug-in on. But looking about it could be that there are issues with touch events when using jQuery. It may be worth taking a look at this plug-in that may solve these issues Touchable. Maybe test out by adding ‘ontouchstart’ and ‘ontouchend’ inline on the divs at first to get the events firing.

Sorry I can’t be much more help. If I ever have access to an iPad I’ll update it accordingly.

Mr Anderson on May 26 11 / 145 Permalink

Hi,
The same as Iain van der Wiel. I have come across this page looking for this feature for my iPad & iPhone webapps. Have you found out anything new about the touch events?

If you have any info please post it as i really can’t find anything else like this on the net!

Matt on May 26 11 / 145 Permalink

Hello,
I’ll publish this comment as others may have a bit more information on the touch events. I haven’t looked into it much myself as I don’t own an iPad and no longer own an iPhone. You may find a little information on the API here.

Hope that helps!

chovy on June 3 11 / 153 Permalink

It doesn’t appear to work in IOS Simulator for iPhone.

Matt on June 3 11 / 153 Permalink

That doesn’t surprise me. I built it to recreate the drag effect for desktop browsers purely for fun. Not sure how well it will work in a production environment.

Yousef on October 30 11 / 302 Permalink

There is no events :mouseup,mousedown with IOS. So how can that works?

Matt on October 31 11 / 303 Permalink

Hi Yousef,
The experiment wasn’t intended to be used on IOS, it’s purely to try a recreate the IOS effect of dragging in the browser as a bit of fun.

Vladimir on March 1 12 / 60 Permalink

Hello! Many thanks for the plug!
There is the question. Can I make a similar effect on the horizontal and vertical? To be able to browse not only the right and left as well as up and down.
Thank you.
Sorry for my English.

Matt on March 2 12 / 61 Permalink

Hi Vladimir,
Sure I don’t see why not. It would take a bit of work but it should be possible. If you were to wrap each of the current ‘faces’ in its own wrapper div (vertically), then have the vertical panels hidden above and below I’d imagine that would work.

firdaus on March 11 12 / 70 Permalink

hi matt, nice effect. this jquery load on ipad, iphone or mobile browser? i just want it load on desktop browser.

sorry for my english.

thanks again.

Matt on March 11 12 / 70 Permalink

Hi firdaus,
I only ever intended the experiment for use on a desktop browser. I guess it could be used to emulate the native functionality of an iDevice, but I haven’t tested it on mobile so can’t comment how well it works.

TryinJQuery on April 21 12 / 111 Permalink

Anyway to make it go vertical up & down sliding instead of left and right

lazhar on May 15 13 / 134 Permalink

hi Matt thank you for sharing this nice effect and its source code, we can apply it to photos?
thank you for the answer

Leave a Comment

Your email will not be published. Required fields are marked *.