deck.js

deck.js

• HTML/JS/CSS
• jQuery
optional SCSS
https://github.com/imakewebthings/deck.js
Pluginspluginsplugins

Prinzip

<section class="slide">
  <h2>deck.js</h2>
  <ul>
    <li>HTML/JS/CSS</li>
    <li>jQuery</li>
    <div class="slide">
      <li>optional SCSS</li>
      <li><a href="teh url">https://github.com/imakewebthings/deck.js</a></li>
      <li>Pluginspluginsplugins</li>
    </div>
  </ul>
</section>

Fallstudie: SVG

• SVG schmeckt wie XML
• HTML riecht entfernt wie XML
• ~> kann man ja mal einbetten
• http://home.heeere.com/tech-deckjs-ext.html

Was tun? Animieren!

• Ein Hintergrund
• Ein Vordergrund
• Hintergrund weg

How to?

1. Plugins deck.anim.js, deck.svg.js benutzen
2. class="slide anim-{show/hide}" data-what="#some_foo"
3. Elemente in der SVG entsprechend benennen (Gruppen gut!)
4. Profit

Ein bisschen komplexer

Zusammenfassung deck.js

• Für Webkennende super!
• Markdown konverter verfügbar
Gefahr: Verleitet zum Spielen
SVGs + HTML5 = super