diff options
| author | Christian Franke <nobody@nowhere.ws> | 2013-04-09 14:31:22 +0200 |
|---|---|---|
| committer | Christian Franke <nobody@nowhere.ws> | 2013-04-09 14:31:22 +0200 |
| commit | 5a774ef6f3b38b19b26913a34b1388530c72334e (patch) | |
| tree | 543127427771d75f652fc9e726cc39aa1a72571c /deck.js/samples/deck-anim.html | |
Initial Commit
Diffstat (limited to 'deck.js/samples/deck-anim.html')
| -rw-r--r-- | deck.js/samples/deck-anim.html | 182 |
1 files changed, 182 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> +<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> +<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]--> +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title>deck.anim.js test/demo</title> + + <meta name="description" content="deck.*.js"> + <meta name="author" content="Rémi Emonet"> + <!--meta name="viewport" content="width=1024, user-scalable=no"/--> + + <!-- Core and extension CSS files --> + <link rel="stylesheet" href="../core/deck.core.css"> + <link rel="stylesheet" href="../extensions/status/deck.status.css"> + <link rel="stylesheet" href="../extensions/hash/deck.hash.css"> + + <!-- Style theme. More available in /themes/style/ or create your own. --> + <link rel="stylesheet" href="../themes/style/neon.css"> + + <!-- Transition theme. More available in /themes/transition/ or create your own. --> + <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"--> + + <script src="../modernizr.custom.js"></script> + + <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline --> + <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> + <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script> + + <!-- Deck Core and extensions --> + <script src="../core/deck.core.js"></script> + <script src="../extensions/hash/deck.hash.js"></script> + <script src="../extensions/status/deck.status.js"></script> + <script src="../extensions/fit/deck.fit.js"></script> + <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css"> + + <script src="../extensions/step/deck.step.js"></script> + <script src="../extensions/events/deck.events.js"></script> + <script src="../extensions/anim/deck.anim.js"></script> + + + <style type="text/css"> + .deck-container>.slide {border: 1px dashed #333;} /* for the demo */ + .slide h1 {font-size: 3em;} + .slide h1 b {color: #0F0;} + .slide h1 em {color: #445; text-shadow: none; font-size: .3em;} + .slide span.highlight {border: 1px solid red;} + .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */ + + </style> + </head> + +<!-- for the demo, the body is not the container so it can be resized by the user --> +<body> + +This page surely has a purpose.<br/> +Use left/right arrow keys to browse the presentation.<br/> + +<!-- for the demo, a resizeable wrapper around the container --> +<div class="deck-container"> + +<!-- Begin slides --> +<section class="slide" id="title-slide"> + <h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>anim</b> extension + <br/><em>use right arrow to move on</em> + </h1> +</section> + +<section class="slide"> + <h2>Nested deck.js slides</h2> + <ul> + <li>Not an extension (in core deck.js)</li> + <li>Just have an element with the “slide” class…</li> + <li>… and it will appear (hit the right arrow now)</li> + <li class="slide">Hey! I appeared! (go on)</li> + <li class="slide">The gray-ish style is part of the theme</li> + </ul> +</section> +<section class="slide"> + <h2>Show/Hide Elements</h2> + <ul> + <li>Go beyond sequential appearance <span class="demo1">… like this!</span></li> + <li class="slide">… for example</li> + <div class="anim-show slide" data-what=".demo1"></div> + <li class="slide">Or hide stuff</li> + <div class="anim-hide slide" data-what="h2"></div> + <li class="anim-show slide" data-what="h2" data-dur="1500">Let's get the title back, slowly :)</li> + </ul> +</section> +<section class="slide"> + <h2>Add/Remove Classes</h2> + <ul> + <li class="slide">We can also <span class="demo1">add</span>/remove classes: like the “highlight”</li> + <li class="slide"><span class="demo2 highlight">This is highlight by default</span> (styled with css)</li> + <li class="slide">We can add a class</li> + <div class="anim-addclass slide" data-what=".demo1" data-class="highlight"></div> + <li class="slide">And remove it</li> + <div class="anim-removeclass slide" data-what=".demo1,.demo2" data-class="highlight"></div> + </ul> +</section> +<section class="slide"> + <h2>Attribute Animations</h2> + <ul> + <li class="slide">We can animate any <span class="demo1">attribute</span>, like the <span class="demo1">color</span></li> + <li class="slide">Let's try</li> + <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#FF0000"></div> + <div class="anim-attribute slide" data-what=".demo1:first" data-attr="color:#00FF00"></div> + <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#0000FF"></div> + <li class="slide">Or the <span class="demo2">size</span></li> + <div class="anim-attribute slide" data-what=".demo2" data-attr="font-size:8em"></div> + <li class="slide">Or play multiple animations</li> + <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="font-size:.5em"></div> + <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="color:#FF0000"></div> + <div class="anim-attribute slide" data-what=".demo2,.demo1" data-attr="font-size:3em"></div> + </ul> +</section> +<section class="slide"> + <h2>Video Control</h2> + <video style="float:right" src="simple.ogv" height="400" width="400" onclick="this.paused ? this.play() : this.pause()" controls="true"></video> + <ul> + <li>Starts paused</li> + <li>Plays on "next"</li> + <li>Then pauses on "next"</li> + <li>Then next slide</li> + </ul> + <div class="anim-play slide" data-what="video"></div> + <div class="anim-pause slide" data-what="video"></div> +</section> +<section class="slide"> + <h2>The “anim” extension</h2> + <ul> + <li>Works in conjunction with</li> + <ul> + <li>“events”: extension that triggers events<br/> (notify the slide when it becomes current)</li> + <li>“step”: extension that also trigger init events<br/> (knowing about toplevel vs nested slides)</li> + </ul> + <li>Uses open attributes "data-*" (see source)</li> + <li>Adds animation classes</li> + <ul> + <li>anim-show/hide, anim-addclass/removeclass,</li> + <li>anim-attribute, anim-play, anim-pause, …</li> + </ul> + </ul> +</section> +<section class="slide"> + <h2>Browser support</h2> + <ul> + <li>Should be ok</li> + </ul> +</section> + +<!-- DEMO: anim --> + +<!-- deck.navigation snippet --> +<!--a href="#" class="deck-prev-link" title="Previous">←</a> +<a href="#" class="deck-next-link" title="Next">→</a--> + +<!-- deck.status snippet --> +<!--p class="deck-status"> + <span class="deck-status-current"></span> + / + <span class="deck-status-total"></span> +</p--> + +<!-- deck.hash snippet --> +<a href="." title="Permalink to this slide" class="deck-permalink">#</a> + +<!-- Initialize the deck --> +<script> +$(function() { + $.deck('.slide', { + // fitMarginX:100, fitMarginY:100, + // fitMode: "stretched" //"center middle" //"bottom right" //"top left" + }); +}); +</script> +</div> +</body> +</html> |