Tuesday, August 26th, 2008

jParallax Turns Elements into a Viewport

Category: jQuery

In the “oh wow, I didn’t know JavaScript could do that” category, I just came across a cool new jQuery plugin called jParallax which implements a parallax effect on selected elements. Now, I’m not ashamed to admit not knowing what “parallax” meant so I looked it up on Wikipedia which totally added closure to the concept being implemented. Till then, I just thought that was a really cool effect!

Parallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

jParallax includes several options for controlling the effect including setting the animation timing and layer positioning control. The demos can be viewed here.

We also covered Brett Taylor’s implementation of a parallax effect last year where he showed how to build parallax backgrounds.

Update: I’ve added straight links to the demos

Demo Links

Posted by Rey Bango at 9:36 am

4.1 rating from 26 votes


Comments feed TrackBack URI

Anyone else not able to open the demo page?

Comment by tj111 — August 26, 2008

The page isn’t up for me either.

Comment by iMarc — August 26, 2008

Me too.

Comment by dave1010 — August 26, 2008

I added direct links to the demos guys. Give it another go.

Comment by Rey Bango — August 26, 2008

You didn’t know what parallax is? One of the first thing I learnt in primary school Woodwork was always to look at your ruler directly from above, to avoid the parallax error.

Comment by igitur — August 26, 2008

I like the map demo, no more shuffeling around with maps – I´d make it move though when you get closer to the viewport edges, and the closer the faster. Async loading of tiles in between should be added of course. Could be a nice usability upgrade for gMaps…

Comment by FrankThuerigen — August 26, 2008

direct links still not working.

Comment by shadedecho — August 26, 2008

that site stephband.info is down (cannot connect)

Comment by randomrandom — August 26, 2008

website is down o.o

Comment by V1 — August 26, 2008

@igitur: Nope. I do now though. :)

Comment by Rey Bango — August 26, 2008

wa wa… not much different to my own 3D’fication:


Comment by Montago — August 26, 2008

It seems to have allot of problems of alignment in screens with big.. resolutions the climber example looks really bad on 1920 x 1200

Comment by V1 — August 27, 2008

Thanks that demo worked just fine

Comment by Remedies — December 8, 2008

Leave a comment

You must be logged in to post a comment.