< web-presentation >

Pure Webcomponents Presentation Framework

Press Space to continue

What is web-presentation?

A fast an simple way to build html presentations!

web-presentation is a set of webcomponents which let you create html presentations in a natural way. If you know HTML, you know web-presentation.

Basic example with one slides

<web-presentation>
  <web-slide>
    <h1>hello world</h1>
  </web-slide>
</web-presentation>
      

Features

Fast

Web components are native

No 3rd party dependencies

Written in pure javascript

Extendable and customizable

Thanks to a modular architecture. The keyboard controls for example are not part of the core.

You can customize web-presentation tags like you would with any other html tag.

Fragments

Step by step

Fragments are a very easy way to display parts of a slide step by step.

<span data-enter="1">Fragments are a very easy way<span>
<span data-enter="2">to display parts<span>
<span data-enter="2">of a slide<span>
<span data-enter="3">step by step.<span>
          

..or to hide

<h1 data-exit="10">Great!!<h1>
        

Getting started

Link one file and start creating your presentation

To get started just include web-presentation.html in your header.

Use the web-presentation and web-slide tags to build your slide.

  <link rel="import" href="web-presentation.html">
      

Transitions

web-presentation comes with great transitions out of the box.

Usage

Just set the transition attribute on a slide

  <web-slide data-transition="moveToLeft">
      

Let's get started.

https://github.com/ChristianKohler/web-presentation