iframe backgrounds auf quarto Folien

Ich baue fast alle meine Dokumente mit quarto, seien es Briefe, Handouts, Artikel oder Folien. Für letztere bin ich über den Beitrag von Emil Hvitfeldt gestolpert. Er bindet iframes als Hintergrund ein, um animierte Folien zu erzeugen.

Passende Hintergrundanimationen finden sich dabei z.B. auf codepen.io und auch im GitHub Repository von Emil.

iFrame einbinden

Im Verzeichnis der .qmd-Datei erstellt ihr einen weiteren Unterordner, und nennt ihn z.B. iframes.
Ladet ein passendes iframe herunter, z.B. von der GitHub-Seite von Emil Hvitfeldt.
Den Ordner des iframes schiebt ihr in euren iframes-Ordner.
Hinter die Rauten einer neuen Folie schreibt ihr {background-iframe="Pfad/zur/index.html"}, also z.B.

## title {background-iframe="iframes/meatballs/index.html"}

Im YAML-Header muss zudem der Parameter preload-iframes: true gesetzt werden.
Eine Beispieldatei könnte so aussehen:

---
title: "iframe backgrounds"
preload-iframes: true
format:
  revealjs:
    embed-resources: true
---

## {.center .white background-iframe="iframes/ambient/index.html"}
::: {.r-fit-text}
Ambient
:::

## {.center background-iframe="iframes/moving-waves/index.html"}
::: {.r-fit-text}
Moving Waves
:::

Das sieht dann in etwa so aus:

(es kann uU etwas dauern, bis der Hintergrund sichtbar ist. Das ist lokal in der “echten” Präsentation aber nicht der Fall)

Nachteil

Einen Nachteil habe ich ebenfalls festgestellt: da die Hintergründe per iframe eingebunden werden, sind sie in der HTML-Präsentationsdatei selbst nicht enthalten, auch nicht, wenn der Parameter embed-resources: true gesetzt ist. Das heisst, man kann die Präsentationsdatei nicht “einfach so” weitergeben, weil dann die animierten Hintergründe nicht mehr funktionieren.

Wenn die Präsentation mittels decktape in eine PDF-Datei umgewandelt wird, bleibt ein Screenshot des Hintergrunds erhalten.

Weblinks

Diskussion per Matrix unter https://matrix.to/#/#produnis-blog:tchncs.de