The Beauty of One-Page Websites

Sometimes, the case may be that you simply don’t need a website with tons of pages and info to show visitors, you’re probably thinking to yourself, “man, I just need something simple and straightforward, not a total package or anything like that”.  For many goals and purposes, you’re exactly right.  You could probably just say everything you need on one neat page.  While every situation is different, and different projects require different things, this is often the situation for many of us.  This is what can make one-page websites so great and convenient.

One-page websites have recently become very popular.  You don’t have to worry about maintaining tons of pages, but all your content is constantly within reach of users.  This design trend is also great for people who want to advertise one-time events, create online portfolios, or even for those just starting up a new business and want to introduce a new product.  Having all your content in one place, it allows you to get to the point, and let users know exactly what you’re about.

What Exactly Is Parallax Scrolling?

In short, parallax scrolling is the desired design effect, where the background image moves at a different rate of speed than the foreground elements, creating an interesting 3D style effect as users scroll further down the page.  It creates a rich sense of depth that really makes things stand out, and well…just looks really cool overall.

One of the first examples of the widespread utilisation of parallax scrolling, believe it or not, took place quite some time ago.  With old-school side-scrolling video games like Mario Bros, Sonic the Hedgehog, and numerous others, parallax scrolling was implemented into the game’s core dynamic.  It made it seem as if the character was actually progressing and travelling forward or backwards throughout the levels.  These days, parallax scrolling is being implemented in the web design world, adding richness and depth to websites that users love.

However, only when a one-page website design and parallax scrolling come together, can the real magic happen.  Websites that make use of these design trends together are able to reach out to users in a way that was otherwise not possible.  They are able to grab the attention of users, and easily tell a story that captivates audiences.

One-Page Websites Show and Tell

Enough with all the talk and theory behind it, let’s get down to it.  To quote and totally misuse a line from one of my favourite movies “The Matrix”, unfortunately, no one can be told what parallax scrolling is…they have to see it for themselves.

Below we have listed five of our favourite and most creative websites with a one-page design, that make great use of parallax scrolling.

Oakley

Promoting their new product, the “Airbrake MX Goggle”, the eyewear retailer Oakley has created an elegant and clean website packed full of parallax goodness.  Not only is this website fully responsive, but the scrolling effects and beautiful photography really make the website shine.  These guys really do a great job of creatively showcasing their products to customers.

Website: https://moto.oakley.com/

Flat vs Realism

I must say, I’ve not met anyone who doesn’t love what the guys at the international agency, inTacto have done with this site.  It’s hands down one of the most creative and interesting uses of parallax on the web today.  Their project Flat Design vs Realism tells the story of the history and battle between the two web design trends.  For those who have the processing power to handle it, they even include a short video game to play when you get past a certain part of the story.  Flat vs Realism has generated a lot of buzz since its launch and even won a Webby award amongst others.

Website: https://www.flatvsrealism.com/

Sony

For a truly beautiful example of parallax done right, look no further than the technology giant, Sony Entertainment.  From game consoles, televisions, and waterproof smartphones and more, the company’s new ad campaign “Be Moved” is absolutely breathtaking.  Sporting a completely responsive web design, along with stunning images and photography, Sony showcases it’s products in a clean and creative manner customers can’t help but love.

Website: https://discover.store.sony.com/be-moved/

Tomato Can Blues

Tomato Can Blues is all about the captivating story of a cage fighter named Charlie Rowan.  Beautifully illustrated and crafted, the New York Times hits it out of the park and brings the story to life.  As readers scroll the page illustrations come to life with stunning animations and special effects.  By far it’s one of the most creative parallax effects I’ve seen implemented, allowing websites to easily grab the attention of their audience.

Website: https://www.nytimes.com/projects/2013/tomato-can-blues/index.html

Peugeot Hybrid 4

This is by far one of the most interesting ad campaigns I’ve seen.  Peugeot has gone all out this time showcasing a comic book-styled ad in order to introduce their new Hybrid4 car technology. As the page is scrolled the story unfolds putting you in the place of a spy, as she extracts information and makes her clean getaway.  The parallax effects really shine here, as the comic book feels it is accurate and fun.

Website: https://graphicnovel-hybrid4.peugeot.com/start.html

All in All

One thing is for sure, while Parallax seems like a new trend that’s recently popped up, I think we’ll see it utilized more and more as time progresses.  Having a one-page website is not only easier for visitors, but it helps your company or website tell a story your visitors will love.  Chillybin has been implementing parallax for quite some time in many of our designs for clients.

With a strong passion for innovation and technology, we love making websites that not only work but look good doing so.  If you’re interested in having your website utilize parallax, or would like to use it in a new project, reach out to Chillybin today!