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.
Tags: Web Design