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 ( 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. ( 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!




One thought on “Creative ways to tell your story through scrolling.”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.