Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Web Design Inspiration: Scrollin’, Scrollin’, Scrollin’

by
Languages:
This post is part of a series called 52 Weeks of Web Design Inspiration.
15+ Tools for Building Your Portfolio on the Web
Discoverability and Feedback in Web Design

Web browsers all have one thing in common: almost without exception they allow us to scroll through content. Scrolling gets us from the top of a document, to the bottom. But it allows much more than that–and for better or worse, web designers have been challenging the scrollbar for some time now, seeing how else it can be used to interact with the web.

As usual in these inspiration posts; we’re going to look at some examples in the wild, examine some of the techniques used, point to some tutorials and courses to help you learn what we find, and list some inspiring examples on Envato Market.

Inspiration

We’ll kick off with forbetter.coffee (ten points for the URL) which begins with a coffee bean, then follows its progress down the page as it gets ground, percolated, and poured into a coffee cup.

Start here, then scroll..

This is in the spirit of the classic scrolling example lostworldsfairs.com. The coffee bean’s position is fixed throughout, so it stays fixed in the browser as the background scrolls past. Eventually it meets certain waypoints, whereupon its position is changed to relative and it scrolls off the top of the screen, only to be replaced by different elements. All this is done with scrollmagic.io.

Susan Lin uses a similar effect (though a completely different aesthetic) on her personal homepage. Get ready to feel nostalgic for 8bit role-play games as Susan’s sprite waddles downward through the pixelated landscape:

Prepare yourself for a detailed tutorial on how this is achieved very soon!

www.voog.com uses scrolling to different effect. Its split layout combines bright colours and interchanging background images, fixed in their masked positions.

This is all done with JavaScript, though you can achieve a very similar masked background effect, as shown by Kezz Bracey, with nothing but CSS.

Parallax

How have we come this far without mentioning parallax?! Let’s fix that now, with help from @claudioguglieri. Check out his homepage, which starts with a beautifully presented open letter. Scroll down and experience the depth suggested by leaves and rose petals as they float past:

httpwwwgugliericom
www.guglieri.com

Claudio uses this sort of thing on more of his websites; check out www.wedontneedroads.co while you’re at it.

More subtle parallax can be found on sublime.fyi; a curated aggregation of design talks and interviews by some very recognisable figures. Scroll down and watch layers of duotone graphics and images drift past:

Firewatch is stunning. Stunning in the game’s painted graphics, in the concept, in its marketing. And its website follows suit. Scroll downwards to gain a sense of depth and environment, and also scale, as you shrink in relation to the landscape.

This next example is a little different, in that the window’s scroll position is used to influence quite a tiny detail. frankbody.com has a menu panel which sticks to the top left of the viewport, then, as you scroll, its background pattern changes subtly.

httpseufrankbodycom
eu.frankbody.com

The JavaScript (or rather jQuery) behind it is as follows:

Feel free to pull this apart in this example:

Envato Market

Let’s take a look at some inspiring scrolling themes and templates for sale on Themeforest.

Zoo - Responsive One Page Parallax Theme
Zoo - Responsive One Page Parallax Theme
Startuply  Multi-Purpose Startup Theme
Startuply — Multi-Purpose Startup Theme
Borderland - A Daring Multi-Concept Theme
Borderland - A Daring Multi-Concept Theme
Scroller - Parallax Scroll  Responsive Theme
Scroller - Parallax, Scroll & Responsive Theme
ROSA - An Exquisite Restaurant WordPress Theme
ROSA - An Exquisite Restaurant WordPress Theme

Learn About Scrolling Events

If you’re interested in creating your own scrolling masterpieces, check out Craig Campbell’s recent course Scroll Events Made Easy. In it, you’ll learn about the basics of scroll events, then build several examples using existing libraries such as parallax.js, wow.js, and skrollr.js. Grab this course for $9.

Additionally, checkout Parallax Scrolling for Web Design, to round off your learning.

Troubleshooting rendering performance issues

When you’re toying with scrolling and positioning, you’re quite potentially toying with the browser’s ability to repaint the scene. In this great quick tip from Harry Roberts, he demonstrates some performance troubleshooting using the browser inspector.

You’ve Reached the Bottom

That’s it for this inspiration roundup, see you in the next one!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.