Have you seen those awesome websites that do that 3D, “cool scrolling thingy” were you scroll the page down or horizontally or both and then things slide and move and overlap other things and the background scrolls slower than images in the foreground or elements grow larger, shrink, morph, spin or shift color?

I know, I know it sounds like I’m describing some sort of 60’s acid trip but its way cooler than that and far less scary. It’s enough to give one a serious geeky epileptic seizure.

I’ve been stumbling across these cool scrolling sites for over a year now and I didn’t have a name for this nerdy design trend and searching for “cool scrolling thingy” in Google gets one only so far. I’ll save you a lot of Googleing vexation and tell you that it’s known as JavaScript Parallax Scrolling.

Parallax?

Yes young Padawan. Parallax scrolling is a technique which sprang from the multiplane camera techniques used in traditional animation in the 40’s then later in the video games of the 80’s. Generally, this 3D effect is achieved by moving background images more slowly past the “camera” than the foreground images. Thus, creating the illusion of depth when it’s really all just 2D.

Granted not all the actions I talked about above are actually parallax scrolling techniques but they are all triggered by JavaScript window scroll events with jQuery being the more popular JS library used.

In fact, there is a  jQuery plugin developed by developer John Polacek called: “Super Scrollorama” (Great name! It’s exactly what I would have named it.) The plugin (jQuery NOT WordPress) should provide those that want cool scrolling goodness on there sites a good leg up to do so.

As awesome as all this stuff is, it’s still just a fad and as such will (I’m afraid) begin to fade away as site users who initially find it cool grow weary of all this mighty fine, jQuery scrolling stuff and become irritated and distracted by it. Evidently, other designers and developers have already come to the same conclusion. Some of the sites I book marked for this article have since changed their own sites to be less parallaxing and spectacular.

Also, all this neat stuff is not really mobile friendly and with the sales of Androids, iPhones, iPads and other tablets now outselling laptops and desktops more designers will opt to go “mobile safe” in order not to piss off the growing number of snooty mobile users. I suppose if you are reading this article on a mobile device you will not be able to see the parallax examples below until you begin using a “real” computing device.

But do not fret. I’m sure while you read this very article mobile nerdlings everywhere are busy in their dark dens of geekery, their fingers a-blur upon their keyboards pounding out some new Mobile Parallaxical Scrolledge Titillation for all of us to use and enjoy…that sounded borderline dirty…oh well.

To truly grasp the coolness of these window scroll event effects you’ll have to experience these web sites first hand. (Except you, you strange little mobile browser user. I was going to make a video for you to show you what you’re missing but then I had to brush my teeth so…)

Below are a few of those cool sites that I really liked.

Note: As of this writing all the linked images below are active and healthy and illustrate the effects I’m talking about. If you find a broken one or if the site no longer has the effect let me know and I’ll remove it. Of course if you know of other sites that contain parallaxing  jQuery scrolling awesomeness let me know and I’ll list them here. Happy hunting.