Instructions
Navigation
- Swipe on a touch device, use the arrow keys on your keyboard or scroll using your mouse
- Page Down/Up moves 5 slides forwards/backwards at a time
- Home/End jumps to beginning/end.
Additional (demo) options
- Images: double-click/double-tap toggles between image fit (css contain) and fill (css cover). In gallery mode it switches between picture frame and fullscreen (css cover).
- Text: scroll up/down when text overflows
- Press 'F' or F11 for full-screen
- Clicking the '?' button opens these instructions, plus these top right buttons:
- 'B' button: toggles the blur effect
- Picture-frame button: toggles gallery mode
- Arrows button: flips the scroll direction (vertical/horizontal)
Note: the user setting 'prefers-reduced-motion' is respected. If set to 'reduce', there will be no animations at all.
The blur effect will then only occur when content/scrollbar is dragged.
Concept & code by Klaas Leussink / 
