Showcase: 11 examples of HTML 5 parallax scroll effect

• Tweet
• Buffer

• Tweet
• Buffer

The parallax scroll effect means displaying multiple background layers that can be scrolled independently in horizontal and vertical directions.This amazing effect was approached in the beginning of 2011 by Nike in their Nike Better World project, and since then, everyone has approached it and created some amazing works.

This showcase presents 11 websites that use the parallax scroll effect in presenting their business.
Enjoy and tell me what you think. Would you implement this technique into your projects?

Bit This

Bit This is an advertising agency based in Madrid, Spain, that uses the parallax scroll effect to present their rules or principles. 5 simple principles to connect brands with people like you.

New Zealand

The New Zealand website is an introduction to tourism in New Zealand. Through this site, potential visitors will be able to learn about the diversity of what New Zealand has to offer and how their visit can become a fantastic experience.And talking about an experience, wow! The parallax scrolling effect is amazing! It is really interesting how they integrated this effect in their marketing strategy.

Diablo Media

Diablo Media is an online marketing agency that helps advertisers and publishers, to push their products and work, to reach their goals effectively. The interesting thing here is how they integrated the parallax scrolling effect, slow and easy blending from one page to another. It’s not something big like the New Zealand site, but strong enough to notice it.

360 Long Road Zurich

A Web documentation, which takes us through the craziest quarters of Switzerland. We follow a police patrol, see the “oldest” business and look into the lives of families, entrepreneurs, colorful birds. A really awesome visual experience! Works like this really show how flexible HTML5 really is. I like the way they integrated tweets and the descriptions of local business. After seeing this, ideas started making their way into my notebook.

Netlash bSeen

Netlash BSeen is the name of the new formed agency from the merger of Netlash builder and Online Marketing Agency bSeen. Their website tells the story of their merger and answers some of their clients questions. A really simple but effective use of the parallax scrolling effect.

Ito Sio Ceni

Ito Sio Ceni is a polish signing group (at list I think so).We can see the parallax scroll effect used on the microphone, but also on the page transitions. A well-integrated effect in the story of the site.

Sullivan

Sullivan , a multi-disciplinary brand engagement firm, approached the parallax scroll effect in presenting their latest work. A simple but effective integration that does them justice.

Nike for a Better World

Nike Better World was the first website that approached the unique scrolling storyboard-style experience. A big step from their behalf, as I was used in experiencing the “Nike environment” from a flash perspective.You can see the evolution of this effect in the other websites. Take a look behind the scenes here.

Iutopi

Iutopi is a Branding, Graphic and Web Design agency with a incredible website. The design in combination with the parallax scrolling effect creats a visual pleasing story.

Cultural Solutions

Uk located management agency, Cultural Solutions added a bubble perspective near the parallax scrolling effect. It creates an interesting visual impact. It doesn’t have the complexity of the other websites, but makes things to look good.

Go Up

Go Up is an italian advertising agency that chose the scrolling effect to present their areas of expertise.