8034

Showcase: 20 Examples of Scrolling as an Innovative Design Tool

3

Scrolling is most often viewed as a mundane design necessity, but a few innovative web designers have used scrolling not just as part of typical page navigation, but as something to incorporate into the design itself. Some designers are creating fairly simple sites that use your browser canvas size to create “slides” that you glide through to see all of the content. A few highly-​​creative designers are trying inventive, unorthodox scrolling techniques: using scrolling to trigger animation, telling a story-​​like narrative with scrolling, and even creating depth with the parallax scrolling effect — where background images move more slowly than the foreground images while scrolling.

Here’s a showcase of 20 highly-​​unusual scrolling techniques to help you foster some scrolling techniques of your own.

Authentic Jobs Charity: Water

Boulder Digital Works

Nike Better World

Beercamp 2011

360° LANGSTRASSE ZÜRICH

The Guide to the App Galaxy

Pixelschupser Media Design

Unfold

Ben the Bodyguard

Quality Cabinets

XS Baltimore

Boudin and Beer

Kinder Uberraschung

ASB

Cesar L

Lost World’s Fairs: Atlantis

Danner — Stumptown

Activate

22mars

SpellTower

Do you have a favorite example? Have you created some interesting scrolling on projects of your own? Do you view scrolling as a mundane design necessity that’s not meant to be played with, or do you consider it an underutilized opportunity to make more innovative designs?

Related posts:

  1. Showcase of Logo Designs from 20 Inspiring Designers
  2. How to Create a Showcase with jQuery
  3. 12 Examples of Custom Key Card Design
  4. Create Custom Type Using The Puppet Warp Tool
  5. Top Minimalist Website Designs: Trends and Examples

Isabelle is a design writer based out of Australia.

Visit Site →

3 Comments

  1. Patrick Kondratko 06 Jun 12 | 11:23 am

    meh, I tried 3 examples, all had issues:

    1) looking at blank pages or partially empty — I’m on a decent connection
    2) slides /​ pages FILLING my history, so I can’t go back to your article.
    3) Pieces don’t line up /​ appear /​ disappear correctly.

    I think these issues detract from user’s experience, and weaken your message. I’m on FF12, win7, so I’d think I’m pretty mainstream.

  2. Very cool Isabelle! Thanks for posting. There are some really great and inspiring designs in here. My head is scrolling! Now to design my own!

  3. i love the parallax effect. so happy that the new technologies are making it easier to use

Leave a Reply

Your Details:

Finish up your comment:

Feedback

Got some ideas?

We are always looking to improve our site, if you have any ideas or feedback we would be glad to hear them! Leave a short message and we will do the best we can to accommodate it.

Or email us on support@designfestival.com