The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.

Parallax Scrolling Defined

Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.

Without Parallax Scrolling

The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

With Parallax Scrolling

The background image scrolls at a different rate as the rest of the elements in the page.

The User Impact of Parallax Scrolling

The technique isn’t exactly new, though, and has actually been used in traditional animation from as early as the 1920’s. It’s also been used in a lot of classic video games, like the Super Mario brothers.

In the realm of web design though, Nike is often credited as one of the first to use parallax scrolling in 2011. Since then, the term “parallax scrolling” (sometimes called “parallax background/s”) has become a common term among designers and developers alike, steadily increasing in popularity.

Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.

What’s In It For the User

What’s great about the effect is that it drives users to engage with your website, heightening both user interaction and appeal. And, when done right, parallax scrolling can bring the simplest of websites to life. It can even be used to create stunning narratives that immediately draws all of the site viewers in.

Share Your Work with Us!

So what do you guys think? Have you used the newest parallax background feature from PBS v4 yet? Is it working to your advantage? Feel free to link us to your work, or leave some suggestions in the comments section below.

Happy Site Building!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.