Having fun with
iFrames
In Quarto Presentations one way to add something extra is to use Slide Backgrounds
Images and videos are good for some added flair, and they automatically fill the background
Using html elements and javascript to make an animated background, is almost impossible to get right inside your .qmd file, but super easy with iFrame Backgrounds
.qmd fileindex.htmlscript.js (optional)style.css (optional)# title {background-iframe=“my-iframe/index.html”}
preload-iframes: true in yamlThis is my preferred setup for a quarto presentation.
Naming the main file index.qmd gives you index.html as your output which is a good default for publishing
awesome-presentation/
├── index.qmd
├── index.html
├── style.scss (only styles index.qmd)
└── my-iframe/
├── index.html
├── script.js
└── style.css (only styles iframe)
From codepen.io
export -> export .zipdist folderparticles.js is a great library that works perfectly as iFrames, and have amazing customization
The following slides contain a number of different iframe for you to use, modify and expand on
Clicking the download link should give you a folder with everything you need
Additional entries are welcome at EmilHvitfeldt/quarto-iframe-examples
Rotating Earth
Hello Matrix
Ambient
Glittering Sea
Moving Waves
Grid Worms
Meatballs
tetris
boids
Multiple Floating Images
Polygon Mask
Colored Particles
Logo Fall
Center of the Universe
css fireworks
flow field
Night Sky
Snowy Landscape
Space Scroller
Stars
Beach Crusin