Amazing Animated Scrolling Sites: A web symphony in design

animationI am a big fan of creative and captivating site design. One way of telling your story through your website’s design is by using animates scrolling effects. How they work is the viewer controls the animation and presentation through the amount the scroll wheel has been moved. Every pixel scrolled triggers a movent to some aspect or object on the web page. In many cases the web designer makes a sort of symphony with the multitude of events being moved and morphed on the page. You can see some past blog posts of mine on animated scrolling website designs here.

Here are some more recent orchestrations of stories being told in that fashion below. For this blog I am including video screen captures with the screenshots of the site as some of the sites in my older blog posts have since disapeared and there is no longer a way to see how they animated in the past. Live and learn 😉

(Note: Click the titles of each site to visit their webpage)

Fishy

I really liked the use of paper like textures on the site. It makes it feel like a book or pamphlet has exploded into life. I also really liked how they put a whole slew of characters and objects into motion without making the site feel cluttered or confusing. This site is a super rich scrolling experience.

 

Ikayzo

Your really gonna like this one. Not only are the graphics smooth, but they capture a great affect and time-period quite elegantly. The concept of having a single machine traverse and change as it scrolls through the deeper pages within it, while also tying it into the story being told is exceptionally well done.

 

Super Chemical

It was the subtle animations created in the background that really caught my eye on this one. There wasn’t as many objects in motion in the foreground as the others, but the scenery chosen to be animated did a good job supplementing the site instead of going heavy on the scroll animations being the star of the show. It looks like these guys put up a new version of the site quite a bit so check out the video, but makes sure you check out the site as well as they may already have a new one out by the time you read this.

 

CSSPiffle

A good use of foreground and background in the scrolling animation. Also a great demo of their product offerings, and I like that it is their “pitch deck” (Something given to clients or investors which is usually done in a power point or pdf).

 

 

Bagigia

I really give credit to this site. It is a site for a leather bag which could easily have been made into a static site like others in their space. They do a great job display the bag using a 3d rotation, and also do a cute tie in between the scroll and the bag by using a zipper as the scroll progress bar at the bottom of the screen.

 

You can find more here: http://favbulous.com/post/983/23-stunning-parallax-scroll-websites-you-have-to-know

Facebook gets into the continuous scroll promo page game

Facebook has embraced the continuous scrolling, animated-esque homepage style. Like I mentioned in my other posts about this style of website (animated scroll sites), the format reduced the closing doors effect that clicking around a site can create. You bring the user into a story and prevents the message from being broken up. The single stream of consciousness keep a user curious to see what comes next. Combine the scroll with the hit-the-bottom-to-load-more-content system the potential for great workflows is there. Im really liking these design patterns, and they keep getting better. I wouldn’t be surprised if this style of website becomes the standard in the next year.

https://www.facebook.com/about/timeline (2011-12-15)

You are introduced to the homepage with a video. A pretty good one at that.

Clicking a button on the bottom quickly scrolls to a new section, so whether you start by scrolling or you are more of a clickster you are taken cre of. And both actions quickly teach you how to interact with ethe site.

As you scroll, the section headers rise to the top and stay there. (much like the other sites I have blogged about, and possibly started form the ios table header design pattern). ALso becoming a standard is the button navigation animates to sync up with where you are scrolled to in the website.

Smart Car Makes Clever Website

I was oddly propelled to click on an ad today, brought to me by the makers of the Smart Car. It was a pretty, clean, well made site. I scrolled up and down to see if anything would catch my eye, and strangely enough something did.

Some time ago I made a post about the coolness of sites I see that take advantage of telling their story, not through pages navigated to by the standard point-and-click, but by animating the home page based on the amount of scroll a user applys to the site. (You can find the post on cool scrolling animated sites here )

Some people have done a poor job of creating well balanced sitethat not only tells a good story, but does in a animated way that tells the story better than it otherwise could be told. And done smooth enough that the coolness, or story, isn’t hindered by the latency and choppyness of the meium.

Well This smart car ad page did just that. And without futher adu, here are some screeen shots and the link to the smart car ad site (2011-12-4).

It begins with a simple page, that focuses all the users attention to the car, and its size.

As you begin scrolling the colors of the sites changes and the a different smart car is presented.

Notice the menu on the right site, letting you know where you are in the story. The white cricle tells you what part of the story you are currently in, and what is coming up next. Notice the blending from one “page” to the next as you scroll. Notice how you find you self scrolling more and more, and digest a few tid bits of knowladge thatyou would ohter wise not have gained behidn a barier of clicks. Well done. 🙂

 

 


Creative ways to tell your story through scrolling.

I read somewhere many years ago that the experience of allowing the user to ready just enough content until the fold, but giving them just enough info that there is more uner the fold was a better tactic then framing your site above the fold with links to actions. For sites that want to say allot, and take users on a journy the scroll is smoother and quicker. It is like a timeline of content from top to bottom, as apposed to a choose yoru own adventure. Since then, I have seen some pretty cool examples of implementations like this. The lastst one I came across was from mozilla (https://webfwd.org/en-US/) Which would make sence since they are the advocates of the web.

Here are some slides (in case they change the site by the time you read this.)

The main home screen looks pretty standard. But notice the color and the footer….

As you scroll up he page the footer rises from the bottom, revealing a whole other expereince….

As the you scroll up, the color of the back ground fades into white, and the old footer is now the new header. I thought it was a beautiful experience…

I have seen many variations of the concept of scrolling while browsing the internet. Here are some others:

This one is called “Ben the body guard” and it was a website for a game. (http://goo.gl/HG9PQ) In this creative experience, the body guard tells you his story as you scroll down the page. The animation of his walking and the street passing by are all based on your scrolling down the page. After the story and his walk is over, the links are neon signs on the buildings rooftops, and the bottom of the page gives you a link to the appstore and a close up of ben peerig down the edge of the top of a high rise. Well done!