vue-keynote-demo

A demo keynote using Vue.js

by Rahul Kadyan

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-keynote"></script>

<div id="app">
  <Keynote>
  <Author-Slide photo="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" name="Author Name"
               animation="slide-in-right">
    Developer, Foo Company
  </Author-Slide>
  <Title-Slide title="A Bold Title" animation="slide-in-right">
    A little description about it.
  </Title-Slide>
  <Photo-Title-Slide photo="https://unsplash.it/1200/800?random=1" title="An unsplash photo" animation="slide-in-right">
    There is a random unsplash photo at top.
  </Photo-Title-Slide>
  <Photo-Title-Slide photo="https://unsplash.it/1200/800?random=2" title="A vertical photo" vertical
                   animation="slide-in-right">
    There is a random unsplash photo on right.
  </Photo-Title-Slide>
  <Photo-Title-Slide photo="https://unsplash.it/1200/800?random=3" title="A vertical photo" vertical left
                   animation="slide-in-right">
    There is a random unsplash photo on left.
  </Photo-Title-Slide>
  <Photo-Slide photo="https://unsplash.it/1200/800?random=4" animation="slide-in-right"></Photo-Slide>
  <Title-Slide title="Slide In - Right" animation="slide-in-right" class="top-left">
    Text in Top Left
  </Title-Slide>
  <Title-Slide title="Slide In - Bottom" animation="slide-in-bottom" class="bottom-right">
    Text in Bottom Right
  </Title-Slide>
  <Title-Slide title="Slide In - Left" animation="slide-in-left" class="top-right">
    Text in Top Right
  </Title-Slide>
  <Title-Slide title="Rotate In" animation="rotate-in" class="bottom-left">
    Text in Bottom Left
  </Title-Slide>
  <Title-Slide title="Fade In" animation="fade-in" class="center-right">
    Text in Center Right
  </Title-Slide>
  <Title-Slide title="Fade Out" animation="fade-out" class="center-left">
    Text in Center Left
  </Title-Slide>
  <Title-Slide title="Flip" subtitle="Be expressive with Vue.js" animation="flip">
    In...

CSS

@import url(https://unpkg.com/vue-keynote/dist/vue-keynote.css)

JavaScript

new Vue({ el: '#app' })