Web Design

Super Cool Smooth Scrolling Parallax Websites

Written by Kevin Liew on 22 Jan 2014
23,767 Views • Shares
5 comments

Single page website design has evolved into a fully interactive, stunning animations and technically challenging web projects.

Few years ago, what you will get for a single page website is usually all content are cramped into a single page and grouped into section. So, as you scroll down, you would able to see all of it, section by section. Nowadays, with powerful browsers plus web technologies, we're no longer restricted to just output information, we can also integrate highly sophisticated animation and presentation to our viewers. It sounds awesome, and they look absolutely stunning in action.

Here we have 8 handpicked smooth scrolling websites with crazy animations. For best experience, use Chrome and wait patiently. :)

Sony: Be Moved

Absolutely stunning animation created by Sony. A microsite called: Be Moved. As you scrolling down, explosive animation to depict each cutting edge technology Sony has ever made. Dismantled products are being assembled as you moving down the page. Crazy.

 

inTacto: Flat vs Realism

A flat vs realism design parody created by inTacto as a 2014 new year greeting card. It scrolls and it even has a build in fighting game.

 

Scroll for the health

Nutrition information will be displayed as you scroll through each fruit.

 

Merry Christmallax

Better late than never. I know Christmas is so last year, but this smooth scrolling digital christmas is definitely worth to be mentioned again.

 

Make Your Money Matter

Scrolling down doesn't mean the page will go downward. Instead, this page actually go horizontal, then vertical, horizontal then vertical..... Based on its flow of story, this website use the scrolling orientation creatively.

 

Almost Human: Meet Your MX

A US series created by Fox called ALmost Human. Here we have its microsite titled: Meet Your MX. With its small details and subtle animation, this website is very well-designed and futuristic.

 

Robby Leonardi's Interactive Resume

Mario's style page scrolling animation. It goes horizontal and you'll see "Robby" the avatar run and jump into sea. If you get caught with the animation, you might miss the actual content in the background. One good thing though, through this kind of website I know he must be pretty skilful to be able to build that.

 

17 Grad

17GRAD is a web design studio. This exhibit will show you theirs principles in an interactive and artistic way. For best user experience they recommend Google Chrome. There are a few "easter-eggs", for example, you can change the shirt, cutting-edge page has a fancy animation on mouse over... Check it out.

 

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

5 comments
Petr Tichy 2 years ago
Nice collection Kevin, thanks for the shout out to Merry Christmallax.

The Sony's Be Moved is definitely a stand out though. Here is my deconstruction of this inspiring site for anyone is interested:

http://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
Reply
Kevin Admin 2 years ago
Well done Petr, I enjoyed your deconstruction article. I was right, It has to be video! :)
Reply
Petr 2 years ago
Hey Kevin, the visuals on the Sony's site are pretty cool. Images or video, that's not important if something looks cool then it does look cool:)

I have just launched another scrolling site. This time a tribute to the Game Boy.

http://ihatetomatoes.net/happy-25th-birthday-game-boy/

Check it out Kevin.
Reply
rahil 2 years ago
amazing!
Reply
orange county web designer 2 years ago
Very impressive and different kind of parallax scrolling. Definitely food for thought. Thanks for sharing.
Reply