7+ Websites with Unique Scrolling Experience

7 Websites with Unique Scrolling Experience

Recently I found another interesting style in Web Design as the boring scrolling experience become really unique and fresh. Scrolling in either horizontally or vertically, it brings the whole new perspective towards creative presentation on the web. We can see how the designers telling a story through scrolling down a page, and the creative placement of the graphic elements that react according to the browser screen.

Personally I found this is really interesting and definitely worth checking out how it actually be done. If you know any resources or tutorials that talks about this cool effect please do let me know by commenting at comment form below. Without further talking, below are the 7 websites that I would like to share with you guys.

Ben the Bodyguard

Perhaps you already knew this great website. The graphics are spooky and by scrolling down, a character tells you how bad it can be when losing an unprotected phone.

Ben the Bodyguard

Nike Better World

Nike is creative too when comes to web presentation. By scrolling down, visitors get to see the description as well as nice photography of Nike products and how they make the world better. Love the parallax scrolling effect.

Nike Better World

Elect-LO-nica Compilation

This is a Japanese website with unique scrolling experience. The site design is really clean and featuring a cute girl character. When scrolling down, she will move from right to left of the screen. However, it can be a little tiring if scroll by using mouse wheel (at least for me).

Elect-LO-nica Compilation

Atlantis World’s Fair

This is one of the cool web designs that showcase the power of IE version 9 that supports Web Open Font Format or WOFF. This illustration based website that was done by Frank Chimero, brings us deep down to the undersea.

Atlantis World's Fair

Have a coffee at Búro Búro

While it looks like an ordinary clean website, wait until you start scrolling down the page. The images are flying front left to right, down to up and vise versa!

Have a coffee at Búro Búro

Old Pulteney Row to the Pole

This is a website with stunning background image. When scrolling down, it has this nice parallax effect as well, giving some sense of depth to it. A very nice touch.

Old Pulteney Row to the Pole

Otokonaki

In the final example, I present you this interesting website with horizontal scrolling. Although there are many examples out there that using horizontal scrolling, but I found this website has really cool illustration style and the scrolling starts from the most right to left. This somehow reminds me of Japanese manga that its first page is normally starts from the back too.

Otokonaki

(New!) BeerCamp at SXSW 2011

Perhaps this is the most unique example here? BeerCamp website really never cease to amaze me! While when you scroll down the page, you are actually zooming in! How cool is that! Please zoom to the very end and you will see a gif animated totem as seen from the movie Inception. You can click it to zoom out (reminder: turn down the volume).

BeerCamp 2011

(New!) Campaign Monitor is hiring

Similar to the Nike Better World, it has the parallax scrolling effect down the page. Perhaps this is the coolest way to hire new talents? Credits to Nori Takahashi for mentioning this.

Campaign Monitor is hiring

Similar Posts:
Powered by Shutterstock

Comments

  • http://parttimeotaku.blogspot.com shinkawa

    Awesome. Is there any tutorial for “Ben the Bodyguard” or “Atlantis World’s Fair” ?

  • http://www.misskish.com/ Jacquie

    This is so exciting! Love the interactivity and friendly usability!

  • http://www.misskish.com/ Miss Kish

    This is so exciting! Love the interactivity and friendly usability!

  • http://parttimeotaku.blogspot.com shinkawa

    It’s ok. Saw some other discussion too. It’s use html5, css3 and some custom data attributes. Thanks anyway for the nice idea you gave me.

    http://www.webmonkey.com/2011/01/cool-sites-nikes-better-world-site-embraces-html5/

    • jayhan

      Hi Shinkawa, thanks for the link! 😀

  • http://www.facebook.com/iDoodleManila Photo Booth

    Awesome. I like the nikebetterworld.com website.

  • Nicolle

    Good stuff! I stumbled upon this website recently check it out it’s probably the best I’ve seen:

    http://rapidboot.com/us/#/home

    • jayhan

      Hi Nicolle, thanks for the site intro!

  • Cristian

    tutorial plis? :S

    • jayhan

      I will post an article about it very soon!