Parallax Website Design by Potent Pages

Parallax Website Design Is…

Parallax website design is where a portion of the website moves at a different speed than another. This creates a 3D effect.

For example, the background of a page may move move more slowly than the rest of the page. This will make it look like the background is further away from the viewer.

Similarly, an object may move quicker than the main content as the viewer scrolls down. This will make the object appear closer.

Why Parallax Website Design is Used:

Attracts & Keeps Visitors

Parallax website design is great for attracting and keeping visitors longer on your website.

When your visitors first see your website, the images of parallax design are more likely to keep and interest them, grabbing their attention and focusing it on their content. As they begin to scroll down, the parallax effect can interest viewers, keeping them on your page longer.

Parallax design is relatively new (websites started using it around 2010) and many visitors aren’t used to seeing it. The effect will likely get noticed.

People may even start to play with the page to see it working. They may scroll up and down multiple times to see how the effect works.

The parallax effect not only attracts your visitors, but more importantly, it engages them and encourages them to use your website. This keeps your visitors on your website longer, helping them remember your website and your company.

It Gives a Competitive Edge

The increased time your visitors stay on your website, and the better chance that they will do what you want them to, like buying your product or service, gives you a competitive edge over your competition.

After your visitors have left your webpage and your competitors’ pages, your visitors are more likely to remember your website because of the parallax effect. This means they may be more likely to buy your product or service, or come back to your website again.

It Focuses Visitors on Content

The parallax effect can focus your visitors’ attention on you content.

Because it makes the content appear in-focus, it will allow your visitors to focus on the content that you want them to. This is especially effective if you blur the background and anything in front of the main content. The effect is similar to how, when using a camera, the parts of an image that you don’t focus on are blurred. This can easily draw in your visitor’s focus on what you want.

How Much Parallax Should be Used?

A Small Amount

A small amount of parallax website design, used in parts of your website, can add a touch of interactiveness to your pages.

It can add interest, drawing in your visitors to your website and encouraging them to continue further down the page. Just like the photograph at the beginning of an article or news piece, the parallax effect can be designed to draw in attention your visitors’ attention and enhance the content of the webpage.

In the first few, critical seconds when a visitor decides whether or not to stay on your webpage, the parallax effect can capture your visitors’ attention. Critically, it can interest them in staying on your page to learn more.

A Large Amount

A large amount of parallax, used throughout your webpage, can engage your visitors in the narrative you are depicting and the story you are telling. The dramatic effect of parallax website design can be truly stunning and memorable. It can bring your story to life, immersing your visitor.

It can not only capture their attention, but make a memorable experience. Parallax design can be a wonderful tool to help your visitors remember your story.

When Parallax Should be Used:

Parallax design can be very helpful when it adds to your visitors’ experience when viewing your webpage. It is great when you need to quickly attract attention to a page.

Sales & Product Pages

This is best for sales pages, pages where you demonstrate your product, or pages where you are introducing your product or business to prospective customers. When you only have a few moments to interest your visitors, effective parallax design can mean the difference between your visitors staying, and leaving.

Think Print

You can compare the best situations for parallax design with similar situations in print media. If you would use a brochure to show or sell your product to your customers, a parallax design would likely work well too.

If you would use a large image, accompanied by a small amount of text in a magazine advertisement or billboard, parallax design would likely be effective when putting the content on a webpage. When you are using an image to achieve your goal, parallax design can make that image more effective.

Be Careful Though

Parallax design should not be used when it may detract from your content however. For text-based articles or news stories where the primary objective is to get visitors to focus on words, using a parallax design can detract from the goal.

This design method is great when you want to draw visitors into images and visual stories, but when you need them to focus on text, drawing them to think about the background can impede their focus.

Parallax Tutorials and Examples

Ready to begin creating parallax websites? Here are some tutorials and examples to get you started.

Parallax Scrolling Tutorials

Our parallax scrolling tutorial uses javascript to create the parallax effect. It does not require any additional libraries, including jQuery.

If you are looking for jQuery, Stellar.js, and Skrollr.js, or CSS tutorials, we list the tutorials on our parallax tutorials page.