Today’s web is a wealth of wonderful content. You can find just about anything you’re looking for with a quick simple search. Unfortunately, as web designers, piecing together creative layouts often isn’t enough to grab and hold the attention of an increasingly web-weary audience. We need something more, something that really jumps out at the user and guides them to the great content inside our designs.
Parallax scrolling is a great way to tackle this tricky problem. It serves as a tasteful design element while also remaining fun and engaging. Parallax scrolling animations can work seamlessly to compliment a variety of designs and with modern web design platforms, they’ve never been easier to implement. But what’s the best way to plug them into your own projects?
We’ve put together a list of five exceptionally creative uses of this technology to demonstrate the power of parallax done right.
We’ll start our list off with a road trip down California’s Highway One. Built for a luxury travel site, this parallax scrolling animation takes users on a tour with sites to see, places to visit, and colorful characters to meet. Jump in a retro Cadillac and enjoy the experience as you tune-in to different radio stations and cruise down the scenic highway. Not only does the animation look cool, it also serves as a wonderful tool to showcase the joys of travel (Exsus’ main product).
Neomam.com presents “Thirteen Reasons Your Brain Craves Infographics”. You’ll notice right off the bat that this site’s use of parallax scrolling is much more subdued. As the user scrolls through the beautifully presented infographics, they’re being tricked into consuming useful information at the same time! See, parallax scrolling isn’t just about the looks, it can be equally effective at presenting information!
Car manufacturer Peugeot has created a visually stunning experience to show off their new HYbrid4 technology. Built to look like the comics we all used to read, this site marries the old page turning aesthetics with modern motion technology. What we end up with an immediately engaging experience that is totally hands-off, letting us simply sit back and enjoy the ride! Well done Peugeot.
The Green Man Festival was recently looking to revamp its online presence. So what did they do? Implement a new and trendy web technology of course! Relying on colorful, yet functional art, the folks behind the green man festival site were able to expertly craft a visually relevant experience to showcase the message and ideals behind the annual event. This site is a fantastic example of how parallax scrolling can capture the unique culture and feel of a group beyond static design.
The New York Times proves themselves to be experts at more than long-form writing with their “Tomato Can Blues” page. What do notice as you scroll through this graphic representation of storytelling? There’s a lot more words than pictures right? These folks have done a great job of making parallax scrolling a supporting cast member rather than the main event we typically see. Instead of letting animation tell the whole story, it provides a visual aide to help guide the imaginations of the audience.
And with that, we bring our list of exemplary websites to a close. There’s a lot to learn from these designs which only reinforces how versatile and downright useful parallax scrolling can be as a design tool. So use these sites as examples of how animation can be used to great effect for engaging and directing your audience!
To start creating your own code-free websites with parallax scrolling, try Webydo!