Parallax scrolling…to do or not to do?

Parallax scrolling…to do or not to do?

Parallax scrolling is a very popular web design trend that we are starting to see as we browse the internet. Some of you have seen it, admired it, but not necessarily thought about what it is and how it can be used. So what exactly is parallax scrolling? It is the interactivity and effect users see when elements on the page move or transform as they scroll up or down on a web page. Webdesignerdepot.com has described it as, “Parallax scrolling is defined as a site on which the background image scrolls faster than the foreground, creating the impression of depth.” It can be used to build a single page website, or it can be used to simply add animation to a page.

Parallax design is wonderful, however some websites overdo the parallax scrolling or use it inappropriately. It should only be used to help tell a story, explain a piece of information such as in a product demonstration, or as a way to call out information. If every element on the page is flying around, spinning, or moving with every scroll down, the user will undoubtedly be distracted from finding the information they are looking for on your website, and that can lead to a lost potential customer. Additionally, if parallax scrolling is implemented using bad code the effect can be a significantly slower load time of your website. One last warning… sometimes parallax scrolling does not render or work well on mobile devices, so keep in mind that a separate experience may need to be created for different devices.

My all-time favorite, and one of the first, parallax designed websites I ever personally saw was for the Lily Camera, the drone that follows you. Check out their website by clicking here (don’t forget to scroll!). What I love about this website is that it doesn’t take long for me to complete the scrolling cycle, the scrolling effect explains how to use the product, what it does in action, and takes apart and reassembles the device just by scrolling. This shows the quality of the product, how it is built, and makes me want to buy it!  Although it doesn’t have the parallax scrolling effect on my iPhone 6, the website is still responsive and optimized on my mobile phone. So, if you are inspired by parallax scrolling and are considering implementing it on your website, think of ways it can be used to improve your users’ experience or enhance the definition of the products you are selling and don’t overdo it. Make the design functional. As Paul Cookson said, “Great web design without functionality is like a sports car with no engine (skillcrush.com).”