Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)

Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid. The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width. ℹ️ Want to now more about scroll snapping? Check […]

Delighters.JS – Add CSS animations to delight users as they scroll down

Nice little library by Martin Kool / Q42. Delighters.js toggles classnames as you scroll. You do the rest! 🤓 Late 2013 I created a likewise thingy (dependent on jQuery) 🙂 The main class toggled is .delighter, with an extra .started or .ended to know if the animation just started or ended. /* when the library […]

Scrollama – Scrollytelling with IntersectionObserver

Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. The code that accompanies the markup pictured above: // instantiate the scrollama const scroller = scrollama(); // setup the instance, pass callback functions scroller .setup({ container: ‘.scroll’, // wrapping container step: ‘.scroll__text .step’, // all steps graphic: ‘.scroll__graphic’, […]

Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior

Next to dynamic imports, another feature that landed in Chrome 63 is CSS overscroll-behavior: Scrolling is one of the most fundamental ways to interact with a page, but certain patterns can be tricky to deal with. For example, the browsers pull to refresh feature, where swiping down at the top of the page, does a […]

Using Intersection Observers

With the Intersection Observer coming to Firefox, a nice article covering it appeared on Mozilla Hacks. The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. To use it, create a new instance […]

Prevent overscroll/bounce in iOS MobileSafari (CSS only)

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents? Bram.us, with bounce scroll Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart, as the little CSS snippet below can […]

rafscroll – chain your scroll events to requestAnimationFrame

new rafscroll(function() { // Do your thing here. }); Your monitor refreshes at 60 frames per second (fps). Scroll events, on the other hand, do not. Chaining your scroll events to a requestAnimationFrame ensures that your transitions and animations will refresh each time the monitor refreshes, rather than each time a scroll event is fired. […]