Parallax Scrolling in Modern Web Design

Examples of parallax design tend to be more visually flashy than practical, but there are clever ways to use the parallax effect to complement the site content.

As websites evolve to meet changing needs, new ways of displaying content are created. Responsive design, flat design, sprites, icon fonts, and parallax scrolling are examples of the web trends that highlight the need for efficiency and liveliness.

Parallax scrolling is an effect used on the web to give depth to a web page. This is done by having the foreground content — such as text or images — scroll faster than the background, such as a large background photo.

Examples of parallax design tend to be more visually flashy than practical, but there are useful ways to use the parallax effect to complement the site content. Below are three examples of parallax scrolling used to tell a story:

  • The Beast by Laura Marling — A poem is read aloud as the site animates automatically.
  • Timeline of NHS Payouts — Payouts from the UK’s National Health Service are described by year as the site visitor scrolls down the page.
  • Iraq Timeline — The White House shows a timeline of events related to Iraq with parallax scrolling to keep the content engaging.

Parallax scrolling relies on JavaScript to move the background content slowly as the foreground content moves at a standard speed.

There are also clever ways to build on to the effect, including using an HTML5 video playing in the background, using shapes and colors that overlap between the foreground and background to create visual effects, and animating content both vertically and horizontally as the user scrolls down a page.

While the effect can be captivating, it should be used when it bolsters the site. Parallax scrolling requires JavaScript and that can be processor-intensive, slowing down a computer or mobile device. Also, sites with the effect often have long pages, and long pages can have SEO and UX performance implications.

Websites that are entertaining while informative can keep site visitors on those sites longer, and sharing those sites with friends.  Parallax scrolling contributes to the ongoing excitement of the web.

Interested in finding a web designer that will not only design a great looking website, but make sure it is iPad and mobile friendly? Contact the responsive web design team at TheeDigital in Raleigh, NC at 919-341-8901 or schedule a consultation.

Sign Up for Newsletters

Be the first to receive the latest industry news and exclusive invitations to TheeDigital events.

  • This field is for validation purposes and should be left unchanged.