Parallax Web Design: To Scroll or Not to Scroll

If you spend much time on the internet, sooner or later you’re going to come across Parallax Web Design.  Someone has asked you to create a website with Parallax Scrolling or you may just be curious. Here’s a basic overview of the parallax effect used in web design. We’ll include some simple examples, pros and cons, and things you’ll need to get started on your Parallax journey.

What does a Parallax Website look like?

In many parallax web designs, the visitor moves up and down the same web page, instead of navigating from one web page to another. As the visitor scrolls down the page, the images in the background move more slowly than the content in the foreground. This gives the page depth.

Parallax Scrolling creates a hypnotic animated effect. By having images glide up on the page and exit as the visitor scrolls, you can “wow” your audience, draw them into your narrative and entice them scene-by-scene to the bottom of the page. Your website will have a storytelling quality to it.

Parallax Scrolling is not just vertical. It can also have horizontal effects or be used to move different icons, images or other elements around the page, each one growing and shrinking while visitors scroll.

Great Parallax Examples

1. NASA Prospect is a light-hearted entertaining narrative with a space theme. It includes music.
2. Too Young to Wed is an educational website dealing with a very serious subject. Images and text alternate in the browser as the visitor scrolls. This site’s sidebar navigation lets you jump ahead (or back) to different sections.
4. Sketchtravel is a creative parallax web design with helpful icons that help visitors navigate easily from the top to the bottom of the page.

What You’ll Need

Parallax Scrolling typically involves combinations of HTML5, CSS3, jQuery , and JavaScript to power the parallax scrolling effects. You’ll also need some high-quality images. The actual parallax scrolling magic comes from JavaScript. You can write the JavaScript on your own or include a JavaScript plug-in to do the work.

Skrollr.js is an example of a JavaScript plug-in designed for creating Parallax Websites. It does not use jQuery and is instead a stand-alone library. Skrollr doesn’t require much more than including the library and adding data attributes. You can add scrolling effects to your site without even exploring how the JavaScript works.

PROS

• With Parallax Web Design, you will surprise your visitors with moving elements and arouse their curiosity. If you tell an impressive enough story, your website will captivate your audience. You can use this to your advantage as you seek to entertain and educate them. Your Parallax Design can also include a guided tour of a new product or service you provide.
• Parallax Web Designs often generate social engagement and sharing. People are likely to share content that is compelling, amusing or educational on Facebook and Twitter.

CONS

• Parallax websites need to be planned out in full beforehand. It is difficult to make subtle changes to the website later on.
• Parallax websites can be time-consuming to view. They can also make navigation difficult.
• Parallax websites do not work well on mobile devices so it is best to provide an alternative solution.
• Parallax Scrollers also tend to discourage return visits because the story needs to be told only once. This makes them impractical for the vast majority of websites.
• Parallax websites also tend to be slow to load in web browsers which means visitors may lose interest and bounce.
• Parallax websites are often one-page sites. That is a problem when you want to optimize your site for search engines. Inbound links can only link to your site’s single page and all of your target keywords must be concentrated on one page.

Parallax Solutions

1.  The more large images you add to your page, the slower it will be. In order to cut down on the load time, you can pre-load images or use sequential loading techniques such as lazy loading.
2. Instead of creating a single-page website, you can feature parallax on your home page and link to non-parallax pages. Your sub-pages can use parallax designs too if you like. By adding more pages to your website, you improve your SEO and give options to your visitors.
3. Also keep in mind that not all visitors to your site will understand Parallax Scrolling right away. Consider giving your visitors a little instruction on how to interact with your content. Adding arrows to show visitors they should scroll to see more is also an effective way to help them understand your website.
4. It’s important to do cross-browser testing with parallax scrolling websites. Also don’t forget about older browsers when using HTML5 and CSS3 to create your Parallax Scrolling Effects.

Beginner Parallax Tutorials

1. Simple Parallax Scrolling Tutorial
    In this tutorial the web page has 4 sections. Each section has a custom background. The JavaScript includes a script which preloads the background images and resizes each of the sections to be 100% of the browser viewport. Skrollr.js is used to create the Parallax Scrolling Effect.
2. A Simple Parallax Scrolling Technique
   In this tutorial, the web page has 2 sections. It utilizes the HTML5 <article> tag and <section> tag with the attributes data-type and data-speed. It also addresses the issue of older IE browsers. (NOTE: Read the DEMO  source code to see how everything is put together.)
3. Creating Scrolling Parallax Effects with CSS
   This tutorial shows how to create the Parallax Effect with CSS only and no JavaScript. This solution works well on desktop computers, but does not function on mobile devices.

Conclusion

Parallax Web Design is the perfect choice for websites where you want to entertain or educate your visitors. Combining your Parallax Web Page with other more traditional pages will help solve the SEO problems associated with one-page websites.

To Scroll or not to Scroll: That is the Question. A Parallax Web Design may be the right answer for your website.