Parallax Scrolling and Its Usage in Web Design
The parallax effect, also called parallax scrolling, is a special technique used in computer graphics at first, where background images move by the camera slower than foreground images. This is the actual concept where websites with parallax scrolling started. It was widely used in the gaming industry more than 10-15 years ago and it is still used today in different domains.
In the past years the parallax effect started to be used widely in web design. Its popularity went through the clouds when Nike redesigned their website based on this concept. Their example can be seen in the showcase below the conclusion.
The design concept started to be used because it is actually quite cool. It looks good, it is (still) an original choice and is very successful as well. The effect makes different elements on the page move at different speeds. The background usually changes by scrolling, but it is not always the case.
Parallax Scrolling Examples
Although this is usually the case, utilizing the parallax scrolling effect doesn’t have to limit you to a fake 3D effect. It can also be used to have different icons, images or other elements moving around the page, growing and shrinking while you browse through the site.
When they see it for the first time, people use to think that the effect is nice. After they start getting a grip of it, they actually understand the parallax scrolling effect is much more than just “nice”.
Different developers do not recommend having more than two elements manipulated in the viewport at the same time. Testing on mid-level machines was crucial before releasing such a web page few years ago.
New age technologies
Although the effect is not easy to do develop either, there are better solutions to it. Since the release of CSS3, creating a parallax scrolling effect got much easier.
The idea behind it is simple. You have all your content on the same page and move through the “sub-pages” with a CSS3 transition. It is basically the concept of the good old “anchor name” tag, only this time there is also a transition applied to it. A good example can be seen in the case below.
As you can notice, all the content is on the same page and moving from one “page” to another happens through a CSS3 transition. It is quite the same effect as the parallax, only infinite times easier for a browser to load.
But there are still some differences if those two effects are compared. It is quite impossible by my knowledge (or at least very difficult in case I missed something) to make elements on the same page move at different speeds while using only CSS3 transitions. This means the exact parallax effect can’t be copied only by CSS3 techniques.
Scrolling Parallax jQuery Effect
This is a parallax jQuery binding the effect to the scrollbars and mouse wheel. This allows the background image or any other element to scroll at a different rate than the web page, so you can easily create an illusion of depth.
This plugin allows you to easily create scrolling presentations for web purposes using the parallax scrolling effect.
jQuery Scroll Path
This one is actually one of the best ones I could find. It helps you create the same parallax effect on different pre-set paths. Even if I don’t see it very useful in a design, it is most certainly very entertaining to play with.
Parallax Scrolling Tutorials
If you want to learn how to create the parallax scrolling effect yourself, then I gathered here some useful resources from the web.
Parallax Slider with jQuery
Building a Parallax Scrolling Story Framework
Parallax Animated Header Tutorial
Build a Parallax Scrolling Website Interface With jQuery and CSS
Although already quite popular, the parallax scrolling effect is not widely used on the web, probably because of two different reasons: it is difficult to develop from scratch and heavy to load by browsers. And if you go for a more simplified CSS3 version, the experience will not be the same anymore.
Don’t get me wrong. I am a huge fan of the parallax effect. I even tried to develop my own portfolio based on it. But once I realized it might not be the proper time for it, I’ve decided to drop it. But if you think you are ready to stun everybody with your version of the parallax scrolling website, I would be more than glad to hear about it.
What do you think about this stunning effect? Have you ever used it or planned to use it? Do you consider it is worth going through so many difficult developing stages in order to create such a website?
Examples of Parallax Scrolling in Web Design
Saucony Kinvara 3