Week 12: Parallax Scrolling

This weeks blog will be exploring the topic of Parallax Scrolling. What comes to mind when you hear the term?

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images the term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.

The Advantages:
Parallax design gives websites a great opportunity to:

• Wow viewers with page depth and animation
• Take a story-telling approach to guide visitors through the site
• Make page visits last longer by encouraging visitors to scroll through the entire page
• Provoke curiosity
• Direct visitors to calls to action
• Reenforce website credibility with innovative interactive viewing

How a website with parallax scrolling looks:

The Disadvantages:

With all of these benefits of parallax site design, there are also several downsides to having a parallax site. Most of these problems stem from the fact that the majority of parallax websites only have a single long page which is extremely detrimental to the site’s SEO as well as load speed. Here are some of the negatives to using parallax scrolling design:

• SEO takes a hit, websites with a single page allow only one set of meta information, one effective h1 tag, and one URL
• A ton of images and other information on one page cause slow load times, causing frustrated visitors to leave the page before they even see it
• Not compatible with responsive and mobile design
• No internal page linking throughout the website
  

Tips:

A few more things to keep in mind when you’re designing a parallax website are:

• Don’t overdo it to make your site too complicated
• Use it to tell a visual story
• Make it fun and engaging with depth using layering
• Emphasize calls to action when directing the visitor through the site
• Account for older browsers and mobile browsing

Here are some links to interesting parallax solutions I've come across:

History of Mario Kart

SoneilNoir

Want to explore some Parallax Scrolling website like the link below
LINK