Despite my current fear of web design, I have decided that the current trend I would like to bring to the attention of my fellow young designers, and the professionals that may not be completely aware or just may be interested in my opinion, is a trend in web design. I would like to talk about Parallax Scrolling.
According to SmashingHub.com, parallax comes from a greek word that means alteration. Ryan Boudreaux explains in a post he wrote for TechRepublic.com about a month ago that the observable position of an object at any given distance is dependent on the viewpoint, or position of the viewer. He also said that we should all be aware that parallax is not new in any way, considering it’s been used by humans since the dawn of man, or enlightenment, whichever came first. Actually, when you think about it, we use the parallax effect every day to estimate distances, that is if you have two normally functioning eyes.
According to Boudreaux, parallax scrolling has been used for animation since the 1940s and in video gaming since the 1980s. The only thing relatively new is its incorporation into web design. To explain the parallax effect and parallax scrolling in terms of web design, he says that it is when you use graphics and animation to simulate motion with background images moving at a different rate than the foreground images. The different methods that are utilized for scrolling would be using multiple background and foreground layers, combining many images into pseudo-layers to create a single image, and using multiple tiles or screens that appear to float over repeated backgrounds. You must also use combinations of HTML5, CSS3, jQuery, and Java Script. The reason I believe this is simply because designers like to use effects that are normally available in one medium in others. Web has become more and more interactive so what better an effect to try and incorporate than one that has been used on the multimedia scene since the 1940s.
What’s so awesome about this effect, if you are not used to it, and the above description doesn’t ring a bell, is that with parallax scrolling one is able to create a 3D effect for the user. What’s even more awesome, and more importantly what has made the use of this effect so popular, is that you don’t have to use Flash or a video to create that illusion. Many that use this effect do it because, like most designers, they were inspired and want to be creative, while others look at the life that it seems to bring to the site. However, if this effect is not used successfully, it could really put a damper on the user experience and ultimately turn your users away in search of a better site. You can tell when this effect is unsuccessful when you notice that it’s overdone or if it doesn’t seem to follow any guidelines.
In my search to find the good and the bad in this particular trend, I have noticed that there are mainly two ways to achieve this effect. One would be when you mouse over an area and the objects change in perspective as your cursor moves to and fro. The other would be at the click of your mouse on the single page sites that seem to magically scroll after the click. The latter can be achieved either vertically or horizontally. Also, be aware that there are some single page sites with this effect that do not have a navigation bar that you could use to jump to the next section, essentially doing the scrolling for you. These sites tend to rub me the wrong way as I can not stand sites that do not have a good navigation system or sites that seem to have pages with endless scrolling.
Also, I want to point out a fact that I began to state earlier in my review of this trend. This trend in web design is only relatively new. As stated by Christian Vasile on DesignModo.com, this effect has been in use for a few years now, however it hit the fan when Nikeredesigned their website and used parallax scrolling. While we are on the subject, I must say that I do really like the Nike site. My only issue is wit the navigation. Of course, you can scroll on your own with the scroll bar, or if you have a wheel on your mouse or if you are using a track pad, but I almost had no idea the navigation buttons where even there! I wish they would either get rid of them or make them larger so that the user easily recognizes its existence. I only realized that the little circles to the right of the page served as some sort of navigation when I saw the position of the green circle change.
Now, backwards this may seem, but this brings me to the whole reason I was attracted to this particular effect in the first place. About four months ago I did a little research about web design and popular tricks so that I could learn them. Well, I ran across the website for Cantilever Fish and Chips, which I believe is a restaurant in Latchford, which is in the United Kingdom. I had never been so excited and turned off at the same time! I was so excited about all of the many things I could do with web design, however I was also very, very intimidated. After trying to figure it out, and failing, I shared it with my friend Lisa and my professor Ms Gusa so that I could blow their minds as well! I’m sure I don’t have to say it, but I did and it felt good. I found an effect that wowed us to the max and found myself a new challenge should I decide to read deeper into what the effect was and how it worked.
Many, like myself, are intimidated yet fascinated by how the background scrolls at times and at others are pinned to their location. Some are moved by the way objects move, like in that of the Nike site. But it is also good to know that the entire page, or site, does not have to be done with this effect, like on the Dezignus site. I warn, in my opinion this is not one of the good sites, however I wanted to point out that only the header image uses this effect. Also, you can use this effect to add special touches to pages like the 404 error page for a site. You can view the GitHub 404 error page to see this in action. Again, I am not a huge fan of this page, this is because of how the elements move. But it shows an example of what I meant.
As you can see there are quite a few examples of sites that have implemented the use of this effect, however I think it is unsuccessful. This include sites like The Art of Flight because of its random scrolling if you use the scroll bar instead of the navigation, the “Inception” explanation because of it’s weird change in direction near the end (however this may hold true to the movie… unfortunately I haven’t seen it. So pardon me if it was actually a good choice to make), Germano Virgili’s site because there is so much information that he tries to make the effect scroll through when you use the navigation to jump for you, the Chappy Barry site because of how slow it scrolls when you use the navigation at the top, and the Volkswagen Beetle site because it takes quite some time to load. The use of this effect actually disrupts the user experience.
However if you would like to see some good, or great, examples of parallax scrolling in effect other than the Nike and Cantilever Fish and Chips site, check out the Rtraction site (I love the process section, and the Smultron Lab (I like that the left side with the navigation is pinned there instead of scrolling).
If you are interested and would like to test out this effect you should check out some tutorials and get started today!
Jay Little 