Showcase: 11 examples of HTML 5 parallax scroll effect
November 17, 2011

11 examples of HTML 5 parallax scroll effect

Web design | comments 14 | 7903 Views

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. The motivating factor for putting this showcase together is the way they integrated the parallax scroll effect into their website. But more importantly is they way the elements are applied in the effect. There are a lot of websites that use this effect just because it is cool and not because it helps them to tell their story. So take your time and have a look over this showcase and get inspired.

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.

11 examples of HTML 5 parallax effect - Bit This

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.

11 examples of HTML 5 parallax effect - New Zeeland

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.

11 examples of HTML 5 parallax - Diablo Media

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.

11 examples of HTML 5 parallax effect - 360 Long Road Zurich

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.

11 examples of HTML 5 parallax - Netlash bSeen

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.

11 examples of HTML 5 parallax effect - Ito Sio Ceni

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.

11 examples of HTML 5 parallax effect - Sullivan

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.

11 examples of HTML 5 parallax effect - Nike Better World

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.

11 examples of HTML 5 parallax effect - Iutopi

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.

11 examples of HTML 5 parallax effect - Cultural Solutions

Go Up

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

11 examples of HTML 5 parallax effect - Go Up

Loading Facebook Comments ...

14 Responses to “11 examples of HTML 5 parallax scroll effect”

  1. […] Showcase: 11 examples of HTML 5 parallax scroll effect […]

  2. Nice post. Nice to see some new ones. At work, we just finished a scrolling parallax website for Subaru. http://www.subaru-global.com/11la … We were largely inspired by the Art of Flight movie website, which is another good one that breaks the linear flow with faux curving scroll.

    • Nick says:

      The website you have created looks awesome! I have been looking at sites with this effect all day trying to figure out where to even start learning this and yours blew me away! It’s so slick and clean. Do you have any advise or directions you could point me in to become better at being a web designer. I don’t really like calling myself a web designer as yet, I feel I’m not up to standard and it would just be a lie to say so; but I want to be one! I’m just struggling to get an education in the field that actually benefits me. I have been pushed around in many different classes or courses in education and never really been taught anything that seemed remotely relevant. Any advise would be great and thanks for your time.

  3. Really grate work Sean! Like the transitions and the idea. You sure know your code. Congrats!
    Hope to see how your portfolio turns out.

  4. […] 来源:Wabbaly 编译:Antonia Huang@DamnDigital(转载请注明来自DamnDigital) 关于作者:Sergiu Naslau 网页兼平面设计师,钟爱视觉交流。现于北丹麦大学学院(University College Nordjylland)攻读多媒体设计与沟通专业。wabbaly.com 是由他创建的,用以分享交流一系列视觉作品。同时读者可以通过他的 twitter和facebook与之交流互动。 […]

  5. […] 来源:Wabbaly 编译:Antonia Huang@DamnDigital(转载请注明来自DamnDigital) […]

  6. […] Showcase: 11 examples of HTML 5 parallax scroll effect Tutorials Web design The Review The Creatives […]

  7. Soizick says:

    Is a single one page website efficient for SEO ??? That is the question…

    • It’s not “the page” that has to be efficient, but your SEO strategy (keywords, content, promotion). SEO is not the only way to bring users to your website. If you look at the examples, you can clearly see that they are agencies. Their websites are not the only way to get in touch with their potential clients.

  8. A couple js tools for helping you build these types of sites:

    Scrollorama (built by me)
    http://johnpolacek.github.com/scrollorama/

    And a really nice new one:
    http://prinzhorn.github.com/skrollr/

  9. Will Drotar says:

    Nice collection, keep it coming!

  10. […] Showcase: 11 examples of HTML 5 parallax scroll effect […]