revealjs - document custom fragments

towards quarto-dev/quarto-cli#4795

Author: cderv

_freeze/site_libs/revealjs/dist/theme/quarto-6a1c7f42864bf5c93bea5e6c4397857a.css

@@ -464,6 +464,33 @@ Appears second
 :::
 ```
 
+### Custom Fragments
+
+Custom effects can be created by specifying CSS styles for `.fragment.effectname` and `.fragment.effectname.visible`. The `visible` class is applied to each fragment as they are navigated through during the presentation. A `custom` class can be added to each fragment to tell reveal.js to avoid applying its default fade-in fragment styles.
+
+For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through.
+
+``` {.markdown .reveal-demo code-preview="demo/mini/fragments-custom.qmd"}
+::: {.fragment .custom .blur}
+First item to be unblurred
+:::
+
+::: {.fragment .custom .blur}
+Second one to be revealed
+:::
+```
+
+with this CSS for the style associated with `blur` class.
+````css
+.reveal .slides section .fragment.blur {
+  filter: blur(5px);
+}
+
+.reveal .slides section .fragment.blur.visible {
+  filter: none
+}
+````
+
 ## Parallax Background
 
 If you want to use a parallax scrolling background, add the `parallax-background-image` and `parallax-background-size` options. For example:

docs/presentations/revealjs/advanced.qmd

@@ -0,0 +1,7 @@
+.reveal .slides section .fragment.blur {
+  filter: blur(5px);
+}
+
+.reveal .slides section .fragment.blur.visible {
+  filter: none
+}

docs/presentations/revealjs/demo/mini/custom-blur.css

@@ -0,0 +1,17 @@
+---
+format: 
+  revealjs: 
+    css: custom-blur.css
+---
+
+### Advance the slide to see custom fragment style (from blurred to focus)
+
+<br/>
+
+::: {.fragment .custom .blur}
+First item to be unblurred
+:::
+
+::: {.fragment .custom .blur}
+Second one to be revealed
+:::