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

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