Using Parallax Scrolling without Overdoing It
Parallax scrolling has been around since the 80s when video games used the effect to make foreground images move at different speeds than background images. It wasn’t until about 2011, though, that parallax scrolling became popular on the web after Nike released its Better World microsite in January of 2011. At that time, parallax was new and exciting. It made a huge impression on first time visitors because of the stunning effects. Now, it has become an overdone effect that is (hopefully) slowly dying down.
Just because an effect has been abused, however, does not necessarily mean it should be thrown to the wind. Some websites use parallax scrolling in just the right amount and the right way – to pique the interest of viewers but point them to the right places. Even ecommerce sites can create some pretty excellent parallax that lends, rather takes away, from conversions. For other websites, parallax scrolling ruins the entire experience of the visitor, turning their site into something very un-usable and confusing. So how do web designers know how to correctly implement this effect?
The first bit of advice to remember is that there are plenty of other ways to make a site stand out and draw visitors in to an experience without parallax scrolling. But if you must use it, then make sure to keep the following points in mind.
Use It for the Right Website
Not every website will benefit from parallax scrolling. In fact, parallax is not beneficial for any website on which users want fast information. Parallax requires scrolling patience, especially if in between helpful information are a bunch of added graphics and cutesy animation. These distractions will usually end up annoying visitors who are in a hurry.
Storytelling websites, however, can benefit greatly from parallax scrolling. Again, you don’t want to create so many extras that getting to the right information is almost impossible. But a parallax effect can really add to the experience and emotional response of a story.
Cyclemon.com brilliantly displays their products in story form with beautiful parallax scrolling. Usually, parallax does not work well for product websites, but Cyclemon is one example of how to make it work, with an engaging story and graphics and a menu that is always accessible for those not willing to scroll.
MadeByBlock tells their brand story in a simple one page website.
This product website for theQ camera uses parallax to create a blog post look and feel.
Spotify does an excellent job of using parallax to add a “cool” factor to their storytelling.
BrokenTwill tells their story as a design studio using interactive parallax.
Remember Small Screens
The biggest problem with parallax scrolling is that it can look great on a tablet or desktop but horrible on a smaller mobile device. Some websites have thought ahead and created a responsive parallax design, which works fairly well. You will just have to make sure your clients know up front that the layout will be a bit different and the effect won’t be as awesome as on a large screen.
Some websites don’t even bother with worrying about make a parallax site work for mobile, which is a big mistake with today’s boom in mobile device use. My recommendation? Go responsive or create a separate mobile site, and don’t use parallax if will create too much of a mess on a small screen.
This Lexus LS website has amazing parallax when viewing on a desktop and does a great job of making the images and text static when on a mobile device.
The Life of Pi Movie journey experience website is gorgeously entertaining, but a mobile version of the experience only has links and a prompt to view the site on a tablet or PC.
Fall in Tennessee takes viewers on parallax journey of what the state has to offer, and the mobile version does away with parallax that would create awkward transitions on a small screen.
L’unita is another great example of a website with a responsive design that removes parallax when on a small screen.
The iStrategyLabs portfolio review is on the more complicated side of parallax scrolling with an animated background and animated graphics, but the responsive design makes it viewable from a mobile device, even if a bit too long.
Keep User Experience in Mind
As briefly mentioned above, parallax scrolling can be infuriating. Sometimes, it can create in a visitor a confusing mix of annoyance and anger but the inability to stop scrolling. Curiosity is probably the single biggest factor for why parallax scrolling can work. However, it is all too easy to cross that thin line between slightly irritating visitors and making them so frustrated that they exit the site before any kind of conversion happens.
If a user cannot easily read text, navigate pages, or find information, then throw your parallax scrolling effect out and start over. If a visitor has to scroll slowly to wait for each section of the parallax story to load properly, then there is too much going on. A successful parallax effect will be quick to load, easy to scroll through, and won’t limit the usability of a site.
This website for Mark Collie has a beautifully unique layout but the parallax is much too jumpy.
This informational website from BizBrain.org is a good example of how well parallax can be used to tell a story with few words and lots of graphics.
The Genentech organization presents its story in this parallax design that scrolls sideways; while very interesting, it leans on the edge of unusuable.
Another very engaging parallax site with very advanced and unique animation effects, this one borders on unusable with a scrolling story that goes on too long.
This website is a good example of where the videos plus parallax scrolling would normally be too much, but for this Mime group and its audience, the effects work perfectly.
Limit Your Parallax
Just a little bit is enough. Parallax is so easy that everyone with a simple web development background can create a crazy design. Just because you can take an effect to the nth degree doesn’t mean you should. Most long scrolling pages can look amazing without a single parallax effect. So use it only when you want to add just a tiny bit of extra to highlight important facts.
The Knormal homepage uses parallax to display brief snippets of their pages in a simple yet intriguing layout.
The Soyuz Coffee website uses images and text to create an awesome parallax scrolling experience without too much clutter.
The Pons Group creates eye-catching but simple graphics representing water flowing from faucets to keep movement flowing down the page, and their “contact us” resembles a huge “don’t touch the red button” type of button from old movies – and clicking on the button actually depresses it.
Using geometric shapes in combination with parallax, Alee Foroughi creates a website that looks amazing but is also easy to navigate.
This short, single page designer website for Michael Ngo creatively uses parallax along with a video of Michael’s head and legs at the top and bottom of the page, with information where his body would be. Very simple yet incredibly original!
Get creative with your parallax. Instead of creating an effect of the screen moving upward as visitors scroll downward, keep the background stationary and have text fade in and out. Some websites have even been known to make a screen to appear to move upward, but use caution with this reverse trick as it can create confusion. Other ideas include using original graphics, photographs with cool effects, unique animations, videos, or custom text in combination with parallax to create a truly one-of-a-kind site!
This petition signing page for the Kyoto Project uses an illustrated parallax story with very limited text. The other benefit? It’s engaging and short enough that it won’t lose too many visitors with limited time or short attention spans.
Goa Kite Flying Festival 2014 has a stunning parallax site with graphics of people flying kites on roofs of houses. Inside the houses…well, let’s just say that the festival seems to like adult animation. It’s one way to entice people to attend a kite flying festival, I suppose!
This is one site that takes parallax to the nth degree, but so beautifully! You have to scroll up, as if you are climbing the Space Needle in Seattle. Facts pop up and gorgeous photographic views shift in and out, depending on your “location” on the needle. When you get tired of scrolling (it goes all the way to the moon), the navigation menu pops up when the curser is at the bottom of the screen.
With handwritten typography and sketched illustrations, the Daydream Designs site is incredibly eye-catching. Their parallax effect is simple too with only a single click at the bottom of the page to make an altered landscape appear with more info. Plus, a “skinny” one page version of the site is available.
Have you ever read a book via parallax website? This ebook certainly provides a unique reading experience with full page graphics in the background and extra facts about Tim Tebow as you scroll through.
Do you have any tips to share about using parallax in web design? Feel free to leave a comment below!
Published February 6th, 2014 by Tara Hornor