WebCitz Blog


Parallax Scrolling: Pros & Cons

Parallax scrolling is a growing web page design tactic that is becoming more common for websites to showcase. Sites that employ parallax scrolling use it’s clever techniques to engage visitors and impact user experience. Parallax scrolling was first utilized in the 1980’s with 2D video games. The technique worked by having the foreground and background moving at different speeds as the player moved through the game. The same effect happens on web pages: while a visitor scrolls up or down on a website, animations and images move and can be interacted with the visitor. All of this depends on what functionality you want for your site and what you want your visitor’s to focus on at the end of your site.

With all website design techniques, parallax scrolling has pros and cons. One big advantage parallax scrolling can offer is a high rate of visitor engagement. This new layout and format of scrolling and animations are used to hold the attention of the visitor while also forcing them to engage in your site. Visitor’s to your page will automatically feel more engaged when scrolling through your site because doing so changes the depth and content of what they are viewing. Basically, when people scroll through your site, things change and animations happen. Since scrolling is a natural instinct, people will make things happen on their own which gives viewer’s a sense of power and control. The desire to explore will pull viewer’s deeper into your site and pull them closer to the end destination.

If implemented correctly, parallax scrolling can help improve all of the following areas of your site:

  • Visitor engagement
  • Holding the interest of your visitor’s
  • Directing the course of navigation to reach an end destination
  • Having one page for easy navigation
  • Creating a story around your brand that will catch the attention of your site’s viewers.

Like all website design options, there are some concerns with parallax scrolling. Everyone knows that you can’t please every visitor you have. Some visitor’s prefer static page designs and the original look of most other sites. Here are a few cons and solutions to these.

Page load times can take a drastic hit when designing for parallax scrolling. Since animations are happening and the content of your site is usually on one page, it will load slower than normal. To fix this problem it helps to keep your page design somewhat minimalist. The more content and layers or image you add, the slower the page will load. It’s pretty safe to say that if a page is loading very slow, the visitor may not stick around to see if the wait is worth it.

Times are changing and many people might view your website from a mobile phone or tablet. Some parallax scrolling templates can be non-responsive. This means they won’t work as well on smaller screens and could even be broken when viewing on a mobile device. To avoid this problem, make sure to choose a template that is responsive or take measures to have a separate mobile optimized site in place.

A lot of people claim that parallax scrolling websites take a hit on SEO or search engine optimization. Rather than having keywords for multiple pages, there is only one page with many parallax scrolling sites. Updating content can be tricky with having only one page as well. Although this can be true, the unique design can simply generate more overall traffic and longer page viewing times.

Overall, parallax scrolling site designs aren’t for everyone. Large ecommerce websites wouldn’t be the best target for parallax scrolling because of the cart functionality as well as having every product on one page. The planning and time spent in the design process is substantially greater and more labor intensive than designing a normal website. Below are a few examples of parallax scrolling sites. Keep in mind that parallax scrolling refers to the scrolling of the page and movement. All animations and content are added features that are decided in the development process.

  • This Mario Kart Wii Website showcases a horizontal parallax scrolling design.
  • Neo Mam Studios created an infographic website with animations and a timer.
  • L’unita, a Toronto restaurant showcases a simple parallax scrolling site focusing on moving backgrounds without animations.

Social Media Icons

Social media icons are popping up everywhere. They can be used to navigate from one social networking site to the next or to see a company’s profiles on any of those sites. Social networking sites include Facebook, Twitter, LinkedIn, Instagram and much more. Depending on the social networking profile you want on your website, there are a lot of strict guidelines and rules to follow. Rules on use of the logos are strict and placed for copyright and legal reasons. Some rules include not altering logos, using old logos, rotating or placing logos too close to other logos of any kind, etc. Each social networking site lists their own guidelines and rules to follow. Assets, color schemes, logos and brands are provided by each social networking site for user’s to download and place on their own personal site. For more information on rules, guidelines, and logo downloads, click on the social networking sites listed: Facebook, Twitter, LinkedIn, Instagram. Adding social media icons to a personal website is a great way to extend your audience and provide more information on your company, site, personal brand, etc.