What is a Parallax Web Page?
Ah the internet, we use it for everything from shopping and socialising, to gaming and reading. So it’s no surprise that almost every business, organisation or slightly vain person has a website these days.
Making a good first impression is key to the success of any endeavour, so providing your visitor with eye-catching web design and a smooth, fun and informative experience should be the primary goal of website design.
One web design trend has stuck around for a while, and has become increasingly more popular due to its smooth interface, potential for stunning visuals and its mould-breaking experience. We’re talking, of course, about the use of parallax scrolling.
But what is parallax? And why is it so popular? I’m glad you asked, because we’re here to educate, so make sure you’re sitting comfortably and get those eyeballs ready, because we’re going to take a scroll through our favourite parallax sites.
So, what exactly is it?
Parallax originated from the classic side scrolling 2D games like Super Mario and Sonic the Hedgehog in order to add a 3D effect to the game. As your 8-bit hero ran across the screen, the foreground would shift the opposite direction to keep the character near the centre of the screen, the background would move in the same direction, but more slowly to give the impression that it is further away.
We’ve come a long way since then, but the same design concept applies to parallax websites, where the background usually moves at a different speed to create the illusion of depth. Parallax sites are layered, with each layer having an image, video or animation that can slide under or over other layers at various speeds while the user scrolls up or down.
Why use parallax?
Parallax gives you the chance to:
- Impress your viewers with animation and page depth.
- Use a storytelling approach to guide your readers through your site.
- Make page visits last longer by encouraging viewers to scroll through the whole page and direct visitors to various calls to action
Let’s face it, some products and services are boring, but the use of engaging web design – including parallax – allows you to make information more interesting. Whether it’s to guide your visitors on a journey towards a specific call to action, promoting your products with an all-guns-blazing display, or showing off your own web design skills, perhaps parallax scrolling is the way to go.
Our favourite parallax sites
Here at Roller, we love a good website, especially if it uses modern design techniques and offers something different. As promised, here are our 5 ultimate favourite parallax scrolling websites:
Sony – Be Moved
Sony’s site is a brilliant example of how stunning and interactive parallax sites can be. The site takes you through Sony’s best-loved and new products, showing their pieces come together (or be destroyed, depending which way you’re scrolling).
The site runs with impeccable smoothness, with a stunning video, split into an image sequence that has been put together so that you can interact with the site via your mouse.
And the site isn’t just good to look at, with social share buttons and links to both internal and external e-Commerce sites throughout the parallax, Sony have created a truly innovative way to engage and attract customers.
Like NASA says at the start of its site – every child wants to be an astronaut, so creating a parallax web-story about just that was always going to be a hit.
Made in collaboration with Humans in Space and the University of South Dakota the site takes its viewers through a story of an astronaut, who after being stranded in space finds a planet-jumping robot.
As fun as the site sounds, it is also very educational, giving out fun facts about all the planets in our solar system as the astronaut visits them. A prime example of how parallax enables information to be fun (the music is also a pretty jazzy too).
We love this sites use of story telling and facts, and Ema is a pretty fun robot to be stuck in space with.
Pi’s Epic Journey
Sticking with the story telling theme, Pi’s Epic Journey is about as interactive as a parallax story can get.
Talking its viewers through the ‘making of’ behind the Oscar-winning film Life of Pi, the site hosts a range of video layers, image layers and clickable layers, creating (much like the film itself) an almost overwhelmingly visual display.
The interactivity of this site is nothing but impressive, with a host of pop out videos, social sharing options and questions to answer. The site is as astounding and imaginative as the film, and shows the true capabilities of a parallax scrolling.
If you spend your nights dreaming of a low-MPG family car with plenty of boot space, you’re allowed to skip this one, but if you love Porsche, then boy o’ boy have we found something for you.
Part history lesson, part excuse to drool over cars, PORSCHEvolution gives a look at Porsche through the decades. Complete with a soundtrack that may take some time before you realise how effective and innovative it is (hint, it’s the same song, remixed to suit the various decades, don’t worry it took me a while too).
This site isn’t as interactive as some parallax sites we’ve seen previously, but that doesn’t mean it’s not still a good one. Sometimes simplicity is effective, and that is very true here.
Bang & Olufsen Beoplay H2
The BeoPlay H2 page has a relatively simple approach, but effortlessly guides the visitor through the technical specs of Bang & Olufsen’s latest headphones.
Not only does the minimalist design and comfortable scrolling provide an experience B&O hopes will carry across into the visitor’s impression of their newest cans, it also includes social share buttons, high-resolution photos of the product in its various colours, and links to purchase them directly from the online shop.
So there you have it, our favourite parallax scrolling site, pretty cool huh?
We understand the importance of websites, and creating a captivating experience is crucial. If looking at these parallax sites has got your creative juices flowing, or if your own site has just been woefully emasculated, then get in touch with us today.