demo.textile

Slide demo

{{slideSetup(slide_number=c/t)}}

{{slide

The HTML Presentation Framework

Created by Hakim El Hattab and contributors
}}

{{slide
h2. Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
}}

{{slide

}}

{{subSlide
h2. Vertical Slides

Slides can be nested inside of each other.

Use the space key to navigate through all slides.

#/2/1
}}

{{subSlide
h2. Basement Level 1

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

{{subSlide
h2. Basement Level 2

#/2

Image not rotated, transform css rule ignored by Redmine.
}}

{{slide
h2. Slides

Not a coder? Not a problem, use textile o markdown wiki syntax.
}}

{{slide(animate=true)
h2. Pretty Code

import React, { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    return (
	...
    );
}

Code syntax highlighting courtesy of highlight.js.

data-trim and data-line-numbers ignored by Redmine
}}

{{slide(animate=true)
h2. With animations

<script type="text/template">
    import React, { useState } from 'react';

    function Example() {
        const [count, setCount] = useState(0);

        return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
            Click me
            </button>
        </div>
        );
    }

    function SecondExample() {
        const [count, setCount] = useState(0);

        return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
            Click me
            </button>
        </div>
        );
    }
</script>

data-trim and data-line-numbers ignored by Redmine
}}

{{slide
h2. Point of View

Press ESC to enter the slide overview.

Hold down the alt key (ctrl in Linux) and click on any element to zoom towards it using zoom.js. Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)
}}

{{slide(animate=true)
h2. Auto-Animate

Automatically animate matching elements across slides with Auto-Animate.

data-auto-animate-easing not yet supported.
}}

{{slide(animate=true)

Auto-Animate

data-auto-animate-easing not yet supported.
}}

{{slide(animate=true)

Auto-Animate

data-auto-animate-easing not yet supported.
}}

{{slide
p. Add the r-fit-text class to auto-size text

FIT TEXT
}}

{{slide
}}

{{subSlide
h2. Fragments

Hit the next arrow…

… to step through …

… a fragmented slide
}}

{{speakerNote
This slide has fragments which are also stepped through in the notes window.
}}

{{subSlide
h2. Fragment Styles

There’s different types of fragments, like:

grow

shrink

fade-out

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green
}}

{{slide(id=transitions)
h2. Transition Styles

You can select from different transitions, like: [[?transition=none#/transitions|None]] [[?transition=fade#/transitions|Fade]] [[?transition=slide#/transitions|Slide]] [[?transition=convex#/transitions|Convex]] [[?transition=concave#/transitions|Concave]] [[?transition=zoom#/transitions|Zoom]]

dynamic transition on hyperlinks not working, queries in hyperlinks not supported by Redmine.
}}

{{slide(id=themes)
h2. Themes

reveal.js comes with a few themes built in:
}}

{{slide

}}
{{subSlide(background_color=#dddddd)
h2. Slide Backgrounds

Set background_color=#dddddd (or use the macro dialog) on a slide to change the background color. All CSS color formats are supported.

!(r-frame){background: rgba(255,255,255,0.1);width=178px;height=238ppx}https://static.slid.es/reveal/arrow.png!:#
}}

{{subSlide
h2. Gradient Backgrounds

Not yet implemented.
}}

{{subSlide(background_image=https://static.slid.es/reveal/image-placeholder.png)
h2. Image Backgrounds
}}

{{subSlide(background_image=https://static.slid.es/reveal/image-placeholder.png,background_size=100px,background_repeat=repeat)
h2. Tiled Backgrounds
}}

{{subSlide(background_color=#000000)
h2. Video Backgrounds

Not yet implemented.
}}

{{subSlide(background_image=http://i.giphy.com/90F8aUepslB84.gif)
h2. … and GIFs!
}}

{{slide(background_color=#4d7e65,background_transition=zoom)
h2. Background Transitions

Different background transitions are available via the backgroundTransition option. This one’s called “zoom”.
}}

{{slide(background_color=#b5533c,background_transition=zoom)
h2. Background Transitions

You can override background transitions per-slide.
}}

{{slide

h2. Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Not yet implemented.
}}

{{slide
h2. Intergalactic Interconnections

You can link between slides internally [[#/2/3|like this]].

Not yet working, Redmine removes slashes after haashes in links.
}}

{{slide
h2. Speaker View

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

{{speakerNote
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).
}}

{{slide
h2. 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.
}}

{{slide
h1. THE END
}}