Maybe you have run across a website in the past year or so that uses a new design technique called parallax scrolling.
When done correctly, this type of design engages visitors and provides a feeling of movement and animation which leads to a positive user experience. I admit it, I love these sites and find them fun and easy to use.
What makes some sites use of the technique more effective than others is their ability to deliver a clear and meaningful message to the user that is improved by the technique. That’s the difference between an okay website and an amazing website.
Amazing Websites That Use Parallax Scrolling
In these 5 sites the scrolling technique improves the sites ability to convey its messaging:
1. Dangers of Fracking
The dangers of fracking website does an incredible job of doing what the site was built to do: inform people about the dangers of fracking. The site is well-designed, easy to read and interesting to follow the scrolling parallax design. After scrolling the entire site, I felt like I had a good understanding of the dangers of fracking and…it was fun!
2. Mo’s & Bows
First of all, I LOVE this concept for a fundraising event! I was so impressed with the elegant and modern look and feel of this website. I really want to go to this event! The way they used the parallax scrolling technique for an event is exceptional. It read easily, like an interactive invitation that landed on a page to do what?…Buy tickets! Yes, this site is definitely converting by selling tickets. Well done.
3. The 21st Century Beetle
The WV Beetle website for their new model makes me want this car! The site’s design, like that of the car, is sexy, sleek and modern. The scrolling parallax design gave the car movement as it drove in and out of each scene. It definitely added to the appeal of the site. I’ve never been that keen on Beetles but, THIS Beetle makes me want to grab my best mate, Sherman and take a ride downtown.
4. Marcus Thomas
Overall, this is well-designed site. The parallax scrolling technique does a great job simplifying the message for the user. Less text with clear messaging makes for an effective site and implementation of the technique.
5. Tinke
Tinke is a new technology for tracking how fit you are at any given time or over a span of time. If you want to know how it works, the site uses the parallax scrolling technique to take the user through the process with a scrolling “tour”. The design has a clean, crisp and bright design. I found it easy to navigate and digest its messaging. Congrats, Tinke, this site rocks!
CONCLUSION
There are tons of great ways to implement the scrolling parallax technique into your web design. I encourage you to take it a step further and actually use the technique to improve the site’s clarity in messaging. Just like my friends here.
Cool! I especially love the fracking one – it’s like an interactive infographic.
Here’s another one that does it in a really unique way – totally different from the ones above.
http://www2.nissan.co.jp/SP/NOTE/SPECIAL/
Another one: http://wakeman.whitecircleepub.com/wakeman-home
There looks to be a tiny bit of parallax on the site but it’s very subtle. Looks like a fun project though.
Yes. Parallax was used only on one page and the scrolling left and right on the three layers, and up and down in a single layer (spaceship) …
here is my portfolio guys.. a site belongs to the parallax family.
http://www.opencreativs.com . please let me know your responses.
Pingback: Learn, Buy, and Cheat Your Way To An Incredible Parallax Scrolling Website | A Better User Experience
Cool designs. I found a site that does this, but is less about full site movement.
http://www.whatisnoir.com
There are some nice plugins to help with this. The one I created is SuperScrollorama:
http://johnpolacek.github.io/superscrollorama/
There’s also skrollr:
http://prinzhorn.github.io/skrollr/
John, I’ve recently been trying to work with SuperScrollorama. It’s awesome. 🙂
Pingback: BUX Podcast #72: The Top 10 UX Articles of 2012 | A Better User Experience
Cool! thanks for inspiration )