3.2 Opciones

3.2.1 Viñetas incrementales

Puede renderizar viñetas de forma incremental agregando la opción incremental:

---
output:
  revealjs::revealjs_presentation:
    incremental: true
---

Si desea renderizar viñetas de forma incremental para algunas diapositivas pero no para otras, puede usar esta sintaxis:

> - Eat eggs
> - Drink coffee

3.2.2 Apariencia

Hay varias opciones que controlan la apariencia de las presentaciones de revealjs:

  • theme especifica el tema que se utilizará para la presentación (los temas disponibles son “default”, “simple”, “sky”, “beige”, “serif”, “solarized”, “blood”, “moon”, “night”, “black”, “league” o “white”).

  • highlight especifica el estilo de resaltado de sintaxis. Los estilos admitidos incluyen “default”, “tango”, “pygments”, “kate”, “monochrome”, “espresso”, “zenburn”, y “haddock”. “null” para evitar el resaltado de sintaxis.

  • center especifica si desea centrar verticalmente el contenido en las diapositivas (el valor predeterminado es falso).

  • smart indica si se debe producir una salida tipográficamente correcta, convirtiendo comillas rectas en comillas curvadas, “—” en guiones largos, “–” en guiones cortos y “…” en puntos suspensivos. Tenga en cuenta que smart está habilitado de forma predeterminada.

Por ejemplo:

---
output:
  revealjs::revealjs_presentation:
    theme: sky
    highlight: pygments
    center: true
---

3.2.3 Transiciones de diapositivas

Puede usar las opciones de transition y background_transition para especificar el estilo de transición de diapositiva predeterminado global:

  • transition especifica el efecto visual al moverse entre diapositivas. Las transiciones disponibles son “default”, “fade”, “slide”, “convex”, “concave”, “zoom”, o “none”.

  • background_transition especifica el efecto de transición de fondo al moverse entre diapositivas de página completa. Las transiciones disponibles son “default”, “fade”, “slide”, “convex”, “concave”, “zoom”, o “none”.

Por ejemplo:

---
output:
  revealjs::revealjs_presentation:
    transition: fade
---

Puede anular la transición global para una diapositiva específica utilizando el atributo de data-transition, por ejemplo:

## Use a zoom transition {data-transition="zoom"}

## Use a faster speed {data-transition-speed="fast"}

También puede usar diferentes transiciones de entrada y salida para la misma diapositiva, por ejemplo:

## Fade in, Slide out {data-transition="slide-in fade-out"}

## Slide in, Fade out {data-transition="fade-in slide-out"}

3.2.4 Fondos de diapositivas

Las diapositivas se encuentran dentro de una parte limitada de la pantalla de forma predeterminada para permitir que se ajusten a cualquier pantalla y escalen de manera uniforme. Puede aplicar fondos de página completa fuera del área de la diapositiva agregando un atributo de data-background al elemento de encabezado de la diapositiva. Se admiten cuatro tipos diferentes de fondos: color, imagen, video e iframe. Abajo hay algunos ejemplos.

## CSS color background {data-background=#ff0000}

## Full size image background {data-background="background.jpeg"}

## Video background {data-background-video="background.mp4"}

## Embed a web page as a background {data-background-iframe="https://example.com"}

background_transition utiliza una animación de forma predeterminada. Esta se puede cambiar a una transición deslizante lineal especificando background-transition: slide. Alternativamente, puede configurar el data-background-transition en cualquier diapositiva con un fondo para anular esa transición específica.