Loading...

Motion-blur scroller

This demo runs on a Dynamic Motion-Blur JavaScript module I wrote. It uses the scroll-event on the slider (scroll element) to calculate speed, and - together with shutter angle - calculates the right amount of blur on the fly. This blur is translated to a value for the stDeviation parameter of a feGaussianBlur SVG filter, which is applied to the slider's "blur-plate": a layer that is positioned behind the slider's contents, and is only visible when scrolling by making the regular contents temporarily invisible.

The coupled CSS plays a crucial part in optimizing performance, as dynamically adjusting an SVG filter is a resource-hungry process, and performs particularly bad on mobile devices if not optimized.

Instructions

To navigate, swipe on a touch device, use the arrow keys on your keyboard or scroll using your mouse. You can also drag the sliders, or the slide counter on the bottom or right part of the screen. Page Down/Up moves 5 slides forwards/backwards at a time and Home/End jumps to beginning/end.

Press F to toggle full-screen, double-click an image to toggle between cover and contain image-fitting modes.

If you append ?debug=true to the url, you'll graphs for speed, blur and current FPS, as well as some extra controls in the floating panel on the left which allow you to adjust the shutter angle (a higher value means more motion-blur).

Click/tap anywhere, or begin navigating, to hide this message.

— FPS (0) — Speed (px/ms) — Blur Blur (applied)
Status
  • Scrolling
  • Blurring
Controls
Shutter angle (180)