According to Wikipedia, Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.The technique grew out of the multi-plane camera technique used in traditional animation since the 1930s, and was popularized among video games in the 1982 arcade game Moon Patrol. (thanks for the explanation wiki!)
Who remembers playing this game?? (not me)
For the non-techy people (like me), what I find so fascinating about Parallax scrolling is that it keeps the viewer’s eye engaged. It creates depth and movement to a page, making it more interactive. Elements in either the background or the foreground have the ability to move, making the computer screen transform from flat to more 3-D like. I felt it was important to turn to computer experts regarding Parallax scrolling, so I googled, and then I googled some more, and now I feel like I have a much better understanding.
According to Helene Sears, a BBC editor who creates a huge range of visuals including all of the daily charts, maps and infographics that accompany on online news stories, “Using parallax scrolling for the Bond feature allowed us to present information in an engaging way that enhances the content without overpowering it and we’ll be looking for ways to use this approach again on bigger news stories”. To read more from Sears and her work click here.
However there is down side to this type of scrolling. Simon Reed, a graphics and web designer says “But for all the benefits there are occasional trade-offs that have to be made when designing and creating parallax-scrolling sites. Namely, the emphasis on design over the content. This can have a knock-on effect when it comes to readability, search engine rankings and the overall effectiveness of what you’re trying to say; which are all pretty important if you’re relying on a parallax-style site as part of a marketing push”. To read the read more on Reed, click here.
Ladies and Gentlemen, now I’d like to present some nifty examples of Parallax scrolling:
This site has a good balance of white space yet still is interactive and engaging. The scrolling comes from different angles, as does the pop-up of “hand-written graphics”. The site had good movement to it. After looking at other examples, this site was a bit on the plain side of things. The cool thing is on the initial landing page, the background is textured like leather, which I found it very appealing.
This site was interesting, it was almost as if you were traveling in an elevator, and each time the elevator door opened there was a new scene. While some of the scenes were a little busy, I really liked that the designers choose only one or two elements on the page to move. They did a good job at creating depth and achieved that 3-D like quality to the page. In the screen shot above, as the two tubes of mascara move up and down on the page, it creates an eye catching element and the movement, for lack of better words, is cool.
WOW WOW WOW!!! Taking a screen shot of this site does not do it adequate justice! Its pretty mind blowing. There are many layers to each page, yet its not overwhelming. There is dynamic movement which is very eye catching, and the different pages move cohesively into the next. There is text on the page, yet its not clustered, and is easily read. On this particular screen shot, there is a video playing in the upper portion background, while the smaller video icons easily glide up and down the page in the foreground. This is one of the best examples I came across.
These examples can easily be applied to public health. The take away message is to create a webpage that strikes a balances with a dynamic, eye-catching movement and presenting clear in-depth information.