From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/samples/deck-anim.html | 182 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 deck.js/samples/deck-anim.html (limited to 'deck.js/samples/deck-anim.html') diff --git a/deck.js/samples/deck-anim.html b/deck.js/samples/deck-anim.html new file mode 100644 index 0000000..8a87db0 --- /dev/null +++ b/deck.js/samples/deck-anim.html @@ -0,0 +1,182 @@ + + + + + + + + + + deck.anim.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
anim extension +
use right arrow to move on +

+
+ +
+

Nested deck.js slides

+
    +
  • Not an extension (in core deck.js)
    • +
  • Just have an element with the “slide” class…
    • +
  • … and it will appear (hit the right arrow now)
    • +
  • Hey! I appeared! (go on)
    • +
  • The gray-ish style is part of the theme
    • +
+
+
+

Show/Hide Elements

+
    +
  • Go beyond sequential appearance … like this!
    • +
  • … for example
    • +
    +
  • Or hide stuff
    • +
    +
  • Let's get the title back, slowly :)
    • +
+
+
+

Add/Remove Classes

+
    +
  • We can also add/remove classes: like the “highlight”
    • +
  • This is highlight by default (styled with css)
    • +
  • We can add a class
    • +
    +
  • And remove it
    • +
    +
+
+
+

Attribute Animations

+
    +
  • We can animate any attribute, like the color
    • +
  • Let's try
    • +
    +
    +
    +
  • Or the size
    • +
    +
  • Or play multiple animations
    • +
    +
    +
    +
+
+
+

Video Control

+ +
    +
  • Starts paused
    • +
  • Plays on "next"
    • +
  • Then pauses on "next"
    • +
  • Then next slide
    • +
+
+
+
+
+

The “anim” extension

+
    +
  • Works in conjunction with
    • +
      +
    • “events”: extension that triggers events
         (notify the slide when it becomes current)
      • +
    • “step”: extension that also trigger init events
         (knowing about toplevel vs nested slides)
      • +
    +
  • Uses open attributes "data-*" (see source)
    • +
  • Adds animation classes
    • +
      +
    • anim-show/hide, anim-addclass/removeclass,
      • +
    • anim-attribute, anim-play, anim-pause, …
      • +
    +
+
+
+

Browser support

+
    +
  • Should be ok
    • +
+
+ + + + + + + + + + +# + + + +
+ + -- cgit v1.2.1