April 8, 2012 at 21:56

Introducing Parallax Scrolling

Original author: Scott Stanton
  • Transfer
Anyone who has played or watched the game of friends, or, in principle, saw games that were released in the 80-90s, should be familiar with the parallax scrolling technique.

Think of games like Mario Bros , Streets of Rage , Mortal Kombat , Turtles in Time or the original Moon Patrol game . In these games, the parallax technique is observed at the moment when several background layers with different textures move at different speeds, which creates the effect of three-dimensional space.

Why did I start talking about retro games in an article on web development? The simplest answer would be “because they are cool,” but no. Parallax Scrolling is a cool design concept that paves its way into the world of web design. Nike was one of the first to use this technique with great success when they hired marketing giants Weiden and Kennedy to develop their original Nike Better World site. The Nike Better World website has since been updated and replaced with a new one, but there is another site that is quite similar to what Nike’s first parallax design looked like - the Activate sports drinks website .



You have probably noticed that while scrolling down a page of a site, several different elements located on this page move at different speeds. Let's take the page shown in the image above as an example. As you scroll down the page, you will see that the blue dots in the background (those that are slightly blurry) move at the same speed as the scrollbar. Also, you will see that a group of blue dots, which are more focused and in the foreground, move at a slightly higher speed than the scrollbar. The text “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED ”and the main title of the“ Products ”page. And finally, there are images of the product itself, both small and out of focus in the background, and large, focused and in the foreground. Product background images are moving at the same speed like text, while product images in the foreground move faster than that text. This is all an ideal demonstration of parallax scrolling, when different layers of images overlap and all move at different speeds when scrolling through the page, creating a three-dimensional effect.

Parallax scrolling is not limited to vertical page scrolling or straight-line scrolling. We give Nintendo the right to demonstrate the perfect example to support this claim. Remember the early Nintendo games, where our heroes usually moved horizontally from left to right along the screen, rather than vertically down, as we saw on the Activate website above. Take a ride on the MarkioKart Wii and let's talk about some cool stuff that we can see there.



The first thing you will notice is the page scrolling direction - it is not vertical, but as said above, but initially horizontal. Of course, this is cool, but it is also not a new concept. Also, you will notice the parallax effect with the Yoshi dinosaur and shells in the background, Mario and Luigi in the foreground and the main content, which move at different speeds when scrolling. But as soon as you reach the #highlights and #attack pages, the offset path will no longer be perfectly horizontal. The same goes for the transition between the #rediscover and #snes pages. Images not only retain their different speed of displacement, but also change the general direction from horizontal to vertical.

It is also worth noting that the use of the parallax effect on your site should not be limited only by the possibility of creating an artificial 3D effect. The website of the German web design studio Webseitenfactory is an example of how you can use parallax to add various effects to the site page, for example, the movement of icons along different paths, their increase and decrease as the site scrolls.



Parallax scrolling can also help revitalize a site that doesn't have much content. What if your entire site consists of a mission statement, or about us section, plus contact information? Most likely, you could do it in one page and under certain conditions you would have a good one-page site, but will visitors remember it? Probably not. But what if we add a little parallax to it, as the people did in Spring / Summer ? My first impression was “Oh, this site looks pretty.” But when I started to scroll it, the impression immediately became “Wow, this site is cool!”. Adding a simple parallax effect just makes the difference between good and memorable.





Parallax scrolling is a good trick to keep up your sleeve. And it can always be used regardless of whether you are making a complex multi-page site, or a simple one-page business card site.

Examples of parallax sites


Some of them are very cool, I recommend that you read:


Tools for creating parallax effects:




Tutorials on creating sites with parallax effects (English):


Tags:

Also popular now: