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.
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:
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.
The JavaScript (or rather jQuery) behind it is as follows:
// function triggered on window scroll
$(window).on('scroll', function() {
// store the current vertical position of the scroll bar
var scroll_top = $(window).scrollTop();
// change inline css rule, based on factor of scroll_top
$('.menu').css('background-position-y', scroll_top * -.1);
});
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.
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!
