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.
- Scrolling
- Blurring
