Having fun with

iFrames

Why should I use 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

How to use iFrame Backgrounds

  1. Add a folder next to your .qmd file
  2. In that folder add the following files
    • index.html
    • script.js (optional)
    • style.css (optional)
  3. Use the following notation to use (title can be empty)

# title {background-iframe=“my-iframe/index.html”}

  1. Set preload-iframes: true in yaml

Folder Structures

This 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)

How to make your own

From codepen.io

  • find one you like
  • click export -> export .zip
  • Copy over the results from the dist folder
  • trim and modify content to your liking
  • Add a README file with references
  • Copy over license

https://particles.js.org/

particles.js is a great library that works perfectly as iFrames, and have amazing customization

Rotating Earth

Download template

Hello Matrix

Download template

Ambient

Download template

Glittering Sea

Download template

Moving Waves

Download template

Grid Worms

Download template

Meatballs

Download template

tetris

Download template

boids

Download template

Multiple Floating Images

Download template

Polygon Mask

Download template

Colored Particles

Download template

Logo Fall

Download template

Center of the Universe

Download template

css fireworks

Download template

flow field

Download template

Download template :::

Night Sky

Download template

Snowy Landscape

Download template

Space Scroller

Download template

Stars

Download template

Beach Crusin

Download template