From 50153c65c6ac37ff783b695f5c6bab2ac72ff517 Mon Sep 17 00:00:00 2001 From: butlerx Date: Sat, 3 Jun 2017 13:20:21 +0100 Subject: add more reveal features to slide demo --- public/docs/slide-example.md | 198 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 189 insertions(+), 9 deletions(-) (limited to 'public/docs') diff --git a/public/docs/slide-example.md b/public/docs/slide-example.md index 6249477f..e0c36ed7 100644 --- a/public/docs/slide-example.md +++ b/public/docs/slide-example.md @@ -1,5 +1,10 @@ -Slide example -=== +--- +slideOptions: + transition: slide +--- + +# Slide example + This feature still in beta, may have some issues. For details please visit: @@ -23,31 +28,68 @@ Is the divider of slides Is the divider of branches +Use the _Space_ key to navigate through all slides. + ---- ### Second branch of first 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 + `` Is the fragment syntax -- Item 1 -- Item 2 +Hit the next arrow... + +... to step through ... + +... a fragmented slide. + +Note: + This slide has fragments which are also stepped through in the notes window. --- -## Second slide +## Fragment Styles - +There's different types of fragments, like: -`` +grow -Is the background syntax +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". + `` Is the transition syntax @@ -80,4 +122,142 @@ default/fast/slow --- -# The End \ No newline at end of file +## 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 + +--- + + + +`` + +Is the background syntax + +--- + + + +
+ +## Image Backgrounds + +`` + +
+ +---- + + + +
+ +## Tiled Backgrounds + +`` + +
+ +---- + + + +
+ +## Video Backgrounds + +`` + +
+ +---- + + + +## ... and GIFs! + +--- + +## Pretty Code + +``` javascript +function linkify( selector ) { + if( supports3DTransforms ) { + + var nodes = document.querySelectorAll( selector ); + + for( var 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 View + +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. + +--- + +# THE END -- cgit v1.2.3 From dcaf38b6cee2e3f4f484688d7f6dd42b2039db76 Mon Sep 17 00:00:00 2001 From: butlerx Date: Mon, 5 Jun 2017 11:27:13 +0100 Subject: fix grammer errors --- public/docs/slide-example.md | 66 ++++++++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 30 deletions(-) (limited to 'public/docs') diff --git a/public/docs/slide-example.md b/public/docs/slide-example.md index e0c36ed7..e2e024b1 100644 --- a/public/docs/slide-example.md +++ b/public/docs/slide-example.md @@ -22,7 +22,7 @@ Is the divider of slides ---- -### First branch of first slide +### First branch of first the slide `----` @@ -32,9 +32,9 @@ Use the _Space_ key to navigate through all slides. ---- -### Second branch of first slide +### Second branch of first the slide -Nested slides are useful for adding additional detail underneath a high level horizontal slide. +Nested slides are useful for adding additional detail underneath a high-level horizontal slide. --- @@ -69,7 +69,7 @@ Note: ## Fragment Styles -There's different types of fragments, like: +There are different types of fragments, like: grow @@ -94,7 +94,8 @@ Different background transitions are available via the transition option. This o Is the transition syntax -you can use: +You can use: + none/fade/slide/convex/concave/zoom --- @@ -103,10 +104,12 @@ none/fade/slide/convex/concave/zoom `` -Also can set different in/out transition +Also, you can set different in/out transition + +You can use: + +none/fade/slide/convex/concave/zoom -you can use: -none/fade/slide/convex/concave/zoom postfix with `-in` or `-out` --- @@ -117,18 +120,21 @@ postfix with `-in` or `-out` Custom the transition speed! -you can use: +You can use: + default/fast/slow --- ## Themes -reveal.js comes with a few themes built in: -Black (default) - White - League - Sky - Beige - Simple +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 +It can be set in YAML slideOptions --- @@ -188,9 +194,9 @@ Is the background syntax function linkify( selector ) { if( supports3DTransforms ) { - var nodes = document.querySelectorAll( selector ); + const nodes = document.querySelectorAll( selector ); - for( var i = 0, len = nodes.length; i < len; i++ ) { + for( const i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { @@ -206,28 +212,28 @@ Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/s ## Marvelous List -* No order here -* Or here -* Or here -* Or here +- No order here +- Or here +- Or here +- Or here --- ## Fantastic Ordered List -1. One is smaller than... -2. Two is smaller than... -3. Three! +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 | +| Item | Value | Quantity | +| ---- | ----- | -------- | +| Apples | $1 | 7 | +| Lemonade | $2 | 18 | +| Bread | $3 | 2 | --- @@ -243,21 +249,21 @@ You can link between slides internally, [like this](#/1/3). --- -## Speaker View +## 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). + 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. +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. --- -# THE END +# The End -- cgit v1.2.3