mirror of
https://git.mills.io/prologic/zs-starter-template.git
synced 2024-11-21 12:56:04 +03:00
Add full slide example borrowed form hedgedoc
This commit is contained in:
James Mills
parent
17b90061d0
commit
be51b263da
274
SlideExample.md
Normal file
274
SlideExample.md
Normal file
@ -0,0 +1,274 @@
|
||||
---
|
||||
title: Slide Example
|
||||
description: Full Slide Example
|
||||
layout: slides.html
|
||||
---
|
||||
|
||||
# Slide example
|
||||
|
||||
This full slide example was borrowed from [HedgeDoc](https://hedgedoc.org/)
|
||||
and made to work with [zs](https://git.mills.io/prologic/zs) using [reveal.js](https://https://revealjs.com/).
|
||||
|
||||
---
|
||||
|
||||
## 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 ...
|
||||
|
||||
<span>... a<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>fragmented<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>slide.<!-- .element: class="fragment" data-fragment-index="3" --></span>
|
||||
|
||||
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 <span><!-- .element: class="fragment highlight-red" -->red</span> <span><!-- .element: class="fragment highlight-blue" -->blue</span> <span><!-- .element: class="fragment highlight-green"-->green</span>
|
||||
|
||||
---
|
||||
|
||||
<!-- .slide: data-transition="zoom" -->
|
||||
|
||||
## 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" -->
|
||||
|
||||
`<!-- .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" -->
|
||||
|
||||
`<!-- .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" -->
|
||||
|
||||
`<!-- .slide: data-background="#1A237E" -->`
|
||||
|
||||
Is the background syntax
|
||||
|
||||
---
|
||||
|
||||
<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-color="#005" -->
|
||||
|
||||
<div style="color: #fff;">
|
||||
|
||||
## Image Backgrounds
|
||||
|
||||
`<!-- .slide: data-background="image.png"-->`
|
||||
|
||||
</div>
|
||||
|
||||
----
|
||||
|
||||
<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" data-background-color="#005" -->
|
||||
|
||||
<div style="color: #fff;">
|
||||
|
||||
## Tiled Backgrounds
|
||||
|
||||
`<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->`
|
||||
|
||||
</div>
|
||||
|
||||
----
|
||||
|
||||
<!-- .slide: data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000" -->
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
||||
|
||||
## Video Backgrounds
|
||||
|
||||
`<!-- .slide: data-background-video="video.mp4,video.webm" -->`
|
||||
|
||||
</div>
|
||||
|
||||
----
|
||||
|
||||
<!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" -->
|
||||
|
||||
## ... and GIFs!
|
||||
|
||||
---
|
||||
|
||||
## Pretty Code
|
||||
|
||||
``` javascript
|
||||
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](http://softwaremaniacs.org/soft/highlight/en/description/).
|
||||
|
||||
---
|
||||
|
||||
## 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](#/1/3).
|
||||
|
||||
---
|
||||
|
||||
## Speaker
|
||||
|
||||
There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). 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<i class="fa fa-fw fa-print"></i>.
|
||||
|
||||
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](https://github.com/hakimel/reveal.js#instructions-1)
|
||||
|
||||
---
|
||||
|
||||
# The End
|
||||
Loading…
Reference in New Issue
Block a user