zs-starter-template/SlideExample.md

title	description	layout
Slide Example	Full Slide Example	slides.html

Slide example

This full slide example was borrowed from HedgeDoc and made to work with zs using reveal.js.

---

First slide

---

Is the divider of slides

---

First branch of first the slide

----

Is the divider of branches

Use the Space key to navigate through all slides.

---

Second branch of first the slide

Nested slides are useful for adding additional detail underneath a high-level horizontal slide.

---

Point of View

Press ESC to enter the slide overview.

---

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

---

Fragments

<!-- .element: class="fragment" data-fragment-index="1" -->

Is the fragment syntax

Hit the next arrow...

... to step through ...

... a fragmented slide.

Note: This slide has fragments which are also stepped through in the notes window.

---

Fragment Styles

There are different types of fragments, like:

grow

shrink

fade-out

fade-up (also down, left and right!)

current-visible

Highlight red blue green

---

Transition Styles

Different background transitions are available via the transition option. This one's called "zoom".

<!-- .slide: data-transition="zoom" -->

Is the transition syntax

You can use:

none/fade/slide/convex/concave/zoom

---

<!-- .slide: data-transition="fade-in convex-out" -->

Also, you can set different in/out transition

You can use:

none/fade/slide/convex/concave/zoom

postfix with -in or -out

---

<!-- .slide: data-transition-speed="fast" -->

Custom the transition speed!

You can use:

default/fast/slow

---

Themes

reveal.js comes with a few themes built in:

Black (default) - White - League - Sky - Beige - Simple

Serif - Blood - Night - Moon - Solarized

It can be set in YAML slideOptions

---

<!-- .slide: data-background="#1A237E" -->

Is the background syntax

---

Image Backgrounds

<!-- .slide: data-background="image.png"-->

---

Tiled Backgrounds

<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->

---

Video Backgrounds

<!-- .slide: data-background-video="video.mp4,video.webm" -->

---

... and GIFs!

---

Pretty Code

function linkify( selector ) {
  if( supports3DTransforms ) {

    const nodes = document.querySelectorAll( selector );

    for( const i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}

Code syntax highlighting courtesy of highlight.js.

---

Marvelous List

• No order here
• Or here
• Or here
• Or here

---

Fantastic Ordered List

1. One is smaller than...
2. Two is smaller than...
3. Three!

---

Tabular Tables

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

---

Clever Quotes

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

---

Intergalactic Interconnections

You can link between slides internally, like this.

---

Speaker

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Note: Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit s on your keyboard).

---

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

---

Print your Slides

Down below you can find a print icon.

After you click on it, use the print function of your browser (either CTRL+P or cmd+P) to print the slides as PDF. See official reveal.js instructions for details

---

The End