Parallax Scrolling: What Is It?
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!