FsFx

for Reveal.js


Note: This device does not support the Fullscreen API.

FsFx.js

Can do a few things:
  1. Enter or exit fullscreen
  2. Trigger 'next slide' after fullscreen
  3. Toggle a class on any element if fullscreen

If a device (looking at you, iPhone) does not support the Fullscreen API, a class of no-fsfx will be added to the body. You can use it to show warnings, hide elements etcetera.

1. Enter or exit fullscreen

  • Triggers if an element with a certain class is clicked
  • This baseclass is 'fsbutton' by default
  • The baseclass can easily be changed in the plugin options

2. Trigger 'next slide' after fullscreen

The start button on the first page of this deck does exacly that

  • If wanted, a 'next slide' function can be called
  • It can be added with a data-fs-gonext="*" attribute
  • The wildcard is the time in milliseconds for a delay

3. Toggle a class on any element if the presentation is fullscreen

  • A class toggle can be added with a data-fs-toggle="*" attribute
  • The wildcard is the class that is toggled in fullscreen
  • In this presentation, see the changes in fullscreen: The background and the button icons