Tuesday, August 26th, 2008
jParallax Turns Elements into a Viewport
Category: jQuery
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
- webdev.stephband.info/parallax_demos.html
- test.stephband.info/parallax_0.6/test.html
- test.stephband.info/parallax_0.6/map.html
- test.stephband.info/parallax_0.5/climber.html
Related Content:
4.1 rating from 25 votes
Anyone else not able to open the demo page?
The page isn’t up for me either.
Me too.
I added direct links to the demos guys. Give it another go.
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.
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…
direct links still not working.
that site stephband.info is down (cannot connect)
website is down o.o
@igitur: Nope. I do now though. :)
wa wa… not much different to my own 3D’fication:
http://www.mdk-photo.com/Vector3%5F2/
It seems to have allot of problems of alignment in screens with big.. resolutions the climber example looks really bad on 1920 x 1200
Thanks that demo worked just fine