This is a splash, shown during loading (bundled with the "anim" extension).
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 “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, and with delays
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, …
Digging Deeper
If you want to learn more, you can:
/
