The Moon Patrol, an arcade game of 1982 fame, was the harbinger of a new technique in the web world. Parallax scrolling, as the technique is called, was implemented in this game; it was one of the original platforms using side-scrolling shooters.
The frenzy tool for web designers
Parallax scrolling is a special computer graphic technique, in which the background images depict slower motion than the foreground images. This gives an illusion of depth in a two dimensional video game and intensifies its impact, giving a false implication of three dimension. Basically, this technique was implemented in traditional animation earlier, but popularity came late with Moon Patrol.
Parallax scrolling can be a nice trick, whether a complex, multi-page website is on your mind or a simple single-page website is to be delivered.
By implementing the parallax scrolling effect in your site, you can go beyond creating a faux-3D effect. Parallax scrolling can be a cool and awesome design concept for the web world, when implemented appropriately. Nike implemented this technique successfully in developing their website with the help of Weiden and Kennedy (the two market leaders).
The implementation of parallax scrolling
Numerous websites today provide an amazing and revitalizing browsing experience using the scrolling technique. Parallax scrolling can be applied to things moving vertically, or in straight lines. And the Nintendo can be an apt example. Earlier, the characters moved horizontally (from left to right) and vertical movement was restricted.
The parallax effect is also elucidated in Mario and Luigi games. The main characters move in the foreground while the shells, etc. move in the background.
Popular games, like Mario Bros and Streets of Rage, owe their success considerably to the parallax technique. The scrolling technique alleviates the impact of motion, with multiple layers of images all moving at different speeds. The 2D images appear to have a 3D-like effect, giving a more realistic appeal to the gaming experience.
image source wikipedia
Simple and effective
This technique can also help in creating a promising website without generous content. Even with basic information like “About us’, ‘Contact’, etc., a website can acquire an impressive outlook with the right technique. A simple effect, like that created out of parallax scrolling, can make the website memorable and enjoyable, and prompt the visitor to regularly browse the website.
There are ample tutorials on implementing this technique. Among the various web browsing effects, this one can score over others and serve well in times to come.
With gaining recognition, the parallax illusion emerges the latest rage in the web designing world. Some websites have used the effect to alleviate their background, while others show more prominence of the parallax illusion in creating an amazing browsing session. The technology found magnified applicability, beyond the video games, when it got implemented in the Silverback website. The website has a hidden treat, which is unearthed when the browser is re-sized.
Many find inspiration in the examples, while some take a step further and take the browsing experience to elevated levels. It depends on the manner this technique is rolled.
The parallax effect can be a powerful tool and serve a strong platform for delivering rich browsing experience. However, when used poorly (or inappropriately), this effect can produce a web page with numerous elements boggling your mind by just moving here and there.The parallax effect can be a star performer in a web design project when accomplished suitably.
Parallax scrolling is a pretty cool feature but often works best in horizontal scrolling rather than vertical, which is probably why it seems more effective in video games rather than web design. I couldn’t help but look up the silverback website when you mentioned it. They make good use of the feature, it’s just a shame it only functions with a window resize!
Good read. For websites, parallax effect is worth implementing for single page portfolio websites only. Also it can help in increasing the stay time of the visitors on a site as they generally engage to look for the animation.
You really nailed the value of the parallax effect in that sentence. That’s why I was drawn to it – to make beautiful websites without the need for heaps of content.
I eventually wrapped my work up into a parallax WordPress theme called Five3. It helps non-programmers make a parallax site, without the need for the dozens of hours working on JavaScript that I put in.
That said, it will always take a surprising amount of time to choose the perfect graphics for a parallax site, whether you use a theme or build your own.