Skip to content
zeigerpuppy edited this page May 10, 2016 · 8 revisions

Hacker Slides allows the creation of HTML5 presentations using the reveal.js framework. It has a built-in markdown editor (using github flavoured markdown) and a preview.

Changing Backgrounds

To access the features of reveal.js to customise the look and transition of slides, we can insert commands using the following example syntax (which will add a background image to a slide):

<!-- .slide: data-background="image_url" -->

colours

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

images

<!-- .slide: data-background="image_url" -->

tiled

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

video background

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

can use animgifs too

iframes

<!-- .slide: data-background-iframe="https://yourserver.com/coolpage" -->

Transitions

You can use different transitions for text versus background

eg:

<!-- .slide: data-background="#2d9e3a" data-transition="slide"  data-background-transition="zoom"-->

choice of transitions:

  • none
  • fade
  • slide
  • convex
  • concave
  • zoom

Fragments

Place this after the element that should come up incrementally (a fragment)

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

notice that you can change order there too by using the index

Tips on using Markdown

Known Bugs

  • many of the transitions and background effects don't render in the preview. you may need to open the presentation and refresh to see the effects.
Clone this wiki locally