Selected works

Simon Stalenhag

Please wait, gallery loading... fetching status

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 /