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? Sometimes 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 prevent the rubber band scrolling: html, body { position: fixed; overflow: […]

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. […]

Space.js – HTML-driven narrative 3D-scrolling

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies […]