This week we’re playing around with a recent web design trend, a technique called parallax scrolling. For those of you who haven’t seen it or hadn’t known the official term, parallax scrolling is the technique used to give an illusion of depth to 2D graphics by having the background images move slower than the foreground images.
What I found most interesting was while I was googling all these “groundbreaking” sites with parallax scrolling, I learned that the technique has actually been around for about 30 years now. In fact parallax scrolling was first widely recognized with the 1982 arcade game Moon Patrol. If I just inadvertently brought back nostalgic feelings for anyone, I found you can get retro video games like Moon Patrol at the App Store, phew!
So, how have we been designing for parallax scrolling? We aren’t exactly sure yet, but we’re having fun with it! One of the big things we’ve noticed is that it works well with long vertical “one page” designs, bold content and lots of space in between. Luckily for us we have the perfect client (fingers crossed) to let us get down and dirty with their material. Since we’re still in the preliminary wire framing and design stages I can’t share too much with you guys, but I can share some sites we’ve been using for inspiration and technical help!
Some sites with great parallax scrolling:
- http://www.nikebetterworld.com
- http://www.smartusa.com
- http://activatedrinks.com
- http://lostworldsfairs.com/atlantis
Parallax scrolling doesn’t have to be vertical! Here’s some tutorials and code to get your sites to scroll every which way!
Keep your eyes open for our new web launches! Hint: the site will be muy loco.