Parallax Scrolling Websites: What are they and why are they useful?

January 29th, 2014 by Vincent Lai

Parallax Design is set to be one of the biggest trends in web development in 2014. But what is it exactly? And why should we bother? Long story short, its all about impact.

You may not know exactly what “parallax scrolling” means, but if you have been surfing around the web lately, chances are you have experienced it, and it has probably made an impression on you whether positive or negative. The term “parallax scrolling” refers to the technique used in websites where elements on the page move and shift at different rates, giving a sense of depth and interactivity to the page itself. It can be used in many different ways, and can bring a different approach to presenting your website.

Product Innovation and Communication Websites are the most likely candidates for using the Parallax Design technique.

Let’s say you are putting together a product, something that is new in the industry, or revolutionises an existing product.  You will want to show this product off, give the customers and clients something that they can visualise and drool over a little. Until recently, a detailed image gallery or annoyingly expensive short video were your only options.  A couple of images supplied too little information, and an extensive video sometimes felt too arduous. Organisations have recently used the new Parallax technique in very creative ways, to bring their products to life.

In the Saucony website (http://community.saucony.com/kinvara3/) they use parallax design to show the construction and science of how their shoes are crafted and constructed. As you scroll down the page, the shoe moves and rotates, adding parts and informing the user of the science behind each piece of the product. Added to this is the dynamically shifting background which subtlety follows the movement of the mouse. All in all, this design is very creative and an effective way to showcase their product.

In the Bagigia website (http://www.bagigia.com/), the creators of the leather bag have used the parallax technique to give viewers a 360 degree view of their unique design. This method allows them to show off their special product, and explain the thought process behind the design. It leaves nothing hidden, so that the customer has a better grasp of what it truly looks like, instead of a couple of still photographs against a stagnant white backdrop.

The other use, as mentioned above, is for communication websites. In my previous blog post, I discussed the use of full bleed images for higher visual impact. This technique coupled with Parallax design can take the impact of your website to new levels, and help you outshine your competitors. The best application of this is for websites that exist purely to impart your company information, where you don’t need more complex functionality or design elements.

A communication website that has used Parallax to very well is http://unfold.no/.  They have cleverly used the layering effect combined with a looping scroll to create what feels like an endless website.

For Contact Point we have created a Parallax micro-website for our design portfolio which showcases some of our work. We have incorporated the dynamic page scrolling links and a layered approach to our imagery whilst using horizontal image scrollers to present our work.

Next time you are contemplating refreshing your website, consider the Parallax technique and whether it can enhance your website visitor’s experience.  I’d love to help create the design!

Facebooktwitterredditpinterestlinkedinmailby feather

Leave a Reply

Subscribe to our monthly

Contactpoint Email News

Our enews is sent out approximately monthly, and contains information on latest digital technologies, and how these can be used to help your organisation grow.

To subscribe, simply fill in your details below: