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.
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.
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.