Every once in a while you stumble across something that literally stops you in your tracks, and makes you think…what the hell? JParallax is one of those things. It triggers the inevitable ‘thought waterfall’ of its endless possible web design implementations. After a good rummage around the net, although not necessarily widely used, this technique will be popular in the over the next couple of years.
What Is Parallax?
Parallax is the term used as a measure for movement along a line of sight. Objects that are nearer to the viewpoint will have a larger parallax than that of objects that appear more distant in same the line of sight. This basically means that when the line of sight adjusts, either on an x or y axis, objects in the foreground will appear to be moving faster than objects in the background.
So what is JParallax?
JParallax is the implementation of the parallax model using the JQuery and JParallax libraries combined with CSS.
How does JParallax work?
Basically, the use of CSS, defines a viewpoint window, in which varying sized transparent PNGs can be seen moving independently behind. The movement is both instantiated and controlled using the required JavaScript files. For those of you who are thinking “what about the lack of transparent PNG support for IE6?” Fear not, using the jQuery iFixPng plugin can soon rectify this problem. The movement of the layers can operate relationally, and across both the x and x axis, or most recently, with no movement at all.
JParallax in Action
For next weeks blog post I will be working through a simple but effective tutorial of how to implement a JParallax header in your web design. The tutorial will cover the complete process in an easy to follow, step-by-step guide
Here are a couple of my favorite JParallax implementations…
If anyone has any more examples of JParallax then let me know via the comment box, as I’m always interested in seeing examples integrated into website design.
…Learn More
To find out more about how JParallax works on a technical level. Then take a look at Stephs Parallax site.
Webdev.stephband.info.
…One more thing!
Don’t forget to come back next week, for my step-by-step guide on how to create a JParallax Header.
great uso of jparallax in rossocarmilla, the italian gothic brand: http://www.rossocarmilla.com
it’s amazing rossocarmilla.com !!!