Haven't you heard yet? Parallax scrolling is all the rage this year in web design, and there's no sign of it slowing down anytime soon. A sophisticated scrolling technique that will impress you, parallax scrolling is characterized by the movement of background images at a slower speed than the foreground images. The end result? A really aesthetically amazing design that produces the illusion of depth as well as greater immersion from the viewpoint of the site visitor.
With all this burgeoning excitement over this nifty technique, it can be tempting to just put anything out there and call it "parallax scrolling," but this won't do your web-design career any favors. Since this is already an extremely hot design trend this year, be meticulous and get parallax scrolling right when you design a site.
These days, designers can absolutely impress site visitors with this method, especially since the technique has evolved greatly since the basic, two-layered sites of old. Incorporate the following parallax-scrolling tips into the next website you design to get astounding results.
Focus on Depth and Layering
Insightful designers will be sure to make depth and layering a prime focal point of their parallax-scrolling design. After all, this technique is all about playing around with depth for the most memorable aesthetic effects you can think of.
Have a look at Madwell's site, which is basically eye candy for anyone excited about parallax scrolling. This illustrates the power of depth and layering done right: The background rolls past quite slowly (as it should) while the foreground moves past so quickly that you sometimes have a hard time keeping up with it. If your design comes close to creating this layer of depth, then you know you've done well.
Unsurprisingly, Madwell's site was recognized earlier this year as the "Site of the Day" by Awwwards.
Incorporate a Historical Timeline
One of the smartest ways to use this unique technique is by incorporating a historical timeline into the design to tell site visitors about the history of your company. First-time site visitors definitely won't expect an introduction to a company's history when they land on the homepage, making this approach a very savvy way to keep visitors sticking around.
inTacto, a digital agency, understands this approach all too well. Its website makes spectacular use of parallax scrolling while taking site visitors on a fast-though-interesting journey through its decade-long history. Scrolling down the page, you can see exactly what this company was doing each and every year going back all the way to 2001, the year of its launch.
Thanks to vibrant colors, simple graphics and effective storytelling, inTacto has created a parallax-scrolling website worth talking about.
Make the Website Friendly to Mobile Devices
Mobile devices figure quite prominently in discussions about responsive design because mobile sites have different requirements than sites viewed on your desktop. Unfortunately for mobile users, many mobile sites also haven't been designed to properly display parallax-scrolling sites. When so many people are using mobile and when mobile represents such constant advertising opportunities, this is simply inexcusable.
Don't make your site like the majority of parallax-scrolling sites out there; design yours to successfully display on mobile devices, too! An increasing number of people are using mobile, so it simply doesn't make sense anymore to solely design websites for desktops.
Consider this popular parallax-scrolling site for the Peugeot graphic novel. It works nicely on your desktop, telling a story as you scroll down the page and including pleasantly surprising horizontal scrolling, too! However, access this same site on your smartphone, and it's embarrassingly bad! The scrolling doesn't work, and you won't be able to follow along with the story.
Promote Your Call to Action
So much of the Internet today is marketing, and sites outfitted with parallax scrolling can tactically use this technique to promote their calls to action to site visitors. A call to action, of course, can be anything from a banner or button to basic text or a graphic that's designed to prompt the visitor to click on it and proceed down the conversion funnel.
Singapore's Tinke website, Tinke is a fitness gadget, has this partnership between parallax scrolling and calls to action utilized to full effect! When you start to scroll down the site's webpage, notice how there is always a call to action in every section. The parallax scrolling of the site seamlessly guides visitors to the "Next" button, which prompts said visitors to keep reading about Tinke. Finally, all this parallax scrolling culminates in the "Buy" command at the bottom of the page.
Respect the Limits of Parallax Scrolling
In spite of the truly awesome aesthetics of parallax scrolling, it's a technique that has its limitations, plain and simple. Yes, this technique is hot right now, but the reality remains that it still isn't widely utilized on the Internet, and with good reason.
As a designer, you have to respect the inherent limitations of parallax scrolling. The first problem is that it can sometimes be quite slow to load on a site, and the second issue is that it's not the easiest technique to develop from scratch. So how does that apply to you, Joe Web Designer?
Don't force parallax scrolling on a website if it's not suitable, for instance if the loading time of the webpage would then make it prohibitive for users to actually want to wait and stay on the site.
As of right now, you basically have two choices: Use either JavaScript or CSS3 for parallax scrolling. If you use JavaScript, you can create complete and legitimate parallax scrolling, yet load times will be aggravating. Go to CSS3, however, and you won't be able to create the slower background/faster foreground effect as smoothly.
Parallax Scrolling: An Acquired Taste
Everyone can agree that this sophisticated technique looks insanely impressive. You give site visitors something to captivate their senses right from the moment they land on your site. That's why parallax scrolling is hot right now and will only get hotter, especially as techniques for developing it improve.
However, let's also be realistic and take a sober look at this technique in the present day and time. It's still not widely utilized on the Internet because of slow load times; in fact, some of the featured parallax-scrolling sites on this list suffer from long load times even though they look great!
Conclusion
If you like parallax scrolling and want to be a pioneer in this design technique, then remember the above mentioned tips. Your design has to accentuate depth and layering above all else because it's the heart and soul of this approach. By also tying in your calls to action with parallax scrolling and using parallax scrolling in unique ways to tell people about your company, you'll get the most out of this technique
Source:webdesign.org
