<!DOCTYPE html> <meta charset="utf-8"> <title>The Title Of Your Presentation</title> <!-- Your Slides --> <!-- One section is one slide --> <section> <!-- This is the first slide --> <h1>My Presentation</h1> <footer>by John Doe</footer> </section> <section> <p>Some random text: But I've never been to the moon! You can see how I lived before I met you. Also Zoidberg. I could if you hadn't turned on the light and shut off my stereo.</p> </section> <section> <h3>An incremental list</h3> <ul class="incremental"> <li>Item 1 <li>Item 2 <li>Item 3 </ul> <details>Some notes. They are only visible using onstage shell.</details> </section> <section> <q> Who's brave enough to fly into something we all keep calling a death sphere? </q> </section> <section> <h2>Part two</h2> </section> <section> <figure> <!-- Figures are used to display images and videos fullpage --> <img src="http://placekitten.com/g/800/600"> <figcaption>An image</figcaption> </figure> <details>Kittens are so cute!</details> </section> <section> <figure> <!-- Videos are automatically played --> <video src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm" poster="http://www.mozilla.org/images/about/poster.jpg"></video> <figcaption>A video</figcaption> </figure> </section> <section> <h2>End!</h2> </section> <!-- Your Style --> <!-- Define the style of your presentation --> <!-- Maybe a font from http://www.google.com/webfonts ? --> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> <style> html { background-color: black; } body { background-color: white; border-radius: 12px} /* A section is a slide. It's size is 800x600, and this will never change */ section { /* The font from Google */ font-family: 'Oswald', arial, serif; font-size: 30px; } h1, h2 { margin-top: 200px; text-align: center; font-size: 80px; } h3 { margin: 100px 0 50px 100px; } ul { margin: 50px 200px; } p { margin: 75px; font-size: 50px; } q { display: block; width: 100%; height: 100%; background-color: black; color: white; font-size: 60px; padding: 50px; } /* Figures are displayed full-page, with the caption on top of the image/video */ figure { background-color: black; } figcaption { margin: 70px; font-size: 50px; } footer { position: absolute; bottom: 0; width: 100%; padding: 40px; text-align: right; background-color: #F3F4F8; border-top: 1px solid #CCC; } /* Transition effect */ /* Feel free to change the transition effect for original animations. See here: https://developer.mozilla.org/en/CSS/CSS_transitions How to use CSS3 Transitions: */ section { -moz-transition: left 400ms linear 0s; -webkit-transition: left 400ms linear 0s; -ms-transition: left 400ms linear 0s; transition: left 400ms linear 0s; } /* Before */ section { left: -150%; } /* Now */ section[aria-selected] { left: 0; } /* After */ section[aria-selected] ~ section { left: +150%; } /* Incremental elements */ /* By default, visible */ .incremental > * { opacity: 1; } /* The current item */ .incremental > *[aria-selected] { opacity: 1; } /* The items to-be-selected */ .incremental > *[aria-selected] ~ * { opacity: 0; } /* The progressbar, at the bottom of the slides, show the global progress of the presentation. */ #progress-bar { height: 2px; background: #AAA; } </style> <!-- {{{{ dzslides core # # # __ __ __ . __ ___ __ # | \ / /__` | | | \ |__ /__` # |__/ /_ .__/ |___ | |__/ |___ .__/ core :€ # # # The following block of code is not supposed to be edited. # But if you want to change the behavior of these slides, # feel free to hack it! # --> <div id="progress-bar"></div> <!-- Default Style --> <style> * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } details { display: none; } body { width: 800px; height: 600px; margin-left: -400px; margin-top: -300px; position: absolute; top: 50%; left: 50%; overflow: hidden; } section { position: absolute; pointer-events: none; width: 100%; height: 100%; } section[aria-selected] { pointer-events: auto; } html { overflow: hidden; } body { display: none; } body.loaded { display: block; } .incremental {visibility: hidden; } .incremental[active] {visibility: visible; } #progress-bar{ bottom: 0; position: absolute; -moz-transition: width 400ms linear 0s; -webkit-transition: width 400ms linear 0s; -ms-transition: width 400ms linear 0s; transition: width 400ms linear 0s; } figure { width: 100%; height: 100%; } figure > * { position: absolute; } figure > img, figure > video { width: 100%; height: 100%; } </style> <script> var Dz = { remoteWindows: [], idx: -1, step: 0, slides: null, progressBar : null, params: { autoplay: "1" } }; Dz.init = function() { document.body.className = "loaded"; this.slides = $$("body > section"); this.progressBar = $("#progress-bar"); this.setupParams(); this.onhashchange(); this.setupTouchEvents(); this.onresize(); } Dz.setupParams = function() { var p = window.location.search.substr(1).split('&'); p.forEach(function(e, i, a) { var keyVal = e.split('='); Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]); }); // Specific params handling if (!+this.params.autoplay) $$.forEach($$("video"), function(v){ v.controls = true }); } Dz.onkeydown = function(aEvent) { // Don't intercept keyboard shortcuts if (aEvent.altKey || aEvent.ctrlKey || aEvent.metaKey || aEvent.shiftKey) { return; } if ( aEvent.keyCode == 37 // left arrow || aEvent.keyCode == 38 // up arrow || aEvent.keyCode == 33 // page up ) { aEvent.preventDefault(); this.back(); } if ( aEvent.keyCode == 39 // right arrow || aEvent.keyCode == 40 // down arrow || aEvent.keyCode == 34 // page down ) { aEvent.preventDefault(); this.forward(); } if (aEvent.keyCode == 35) { // end aEvent.preventDefault(); this.goEnd(); } if (aEvent.keyCode == 36) { // home aEvent.preventDefault(); this.goStart(); } if (aEvent.keyCode == 32) { // space aEvent.preventDefault(); this.toggleContent(); } if (aEvent.keyCode == 70) { // f aEvent.preventDefault(); this.goFullscreen(); } } /* Touch Events */ Dz.setupTouchEvents = function() { var orgX, newX; var tracking = false; var db = document.body; db.addEventListener("touchstart", start.bind(this), false); db.addEventListener("touchmove", move.bind(this), false); function start(aEvent) { aEvent.preventDefault(); tracking = true; orgX = aEvent.changedTouches[0].pageX; } function move(aEvent) { if (!tracking) return; newX = aEvent.changedTouches[0].pageX; if (orgX - newX > 100) { tracking = false; this.forward(); } else { if (orgX - newX < -100) { tracking = false; this.back(); } } } } /* Adapt the size of the slides to the window */ Dz.onresize = function() { var db = document.body; var sx = db.clientWidth / window.innerWidth; var sy = db.clientHeight / window.innerHeight; var transform = "scale(" + (1/Math.max(sx, sy)) + ")"; db.style.MozTransform = transform; db.style.WebkitTransform = transform; db.style.OTransform = transform; db.style.msTransform = transform; db.style.transform = transform; } Dz.getDetails = function(aIdx) { var s = $("section:nth-of-type(" + aIdx + ")"); var d = s.$("details"); return d ? d.innerHTML : ""; } Dz.onmessage = function(aEvent) { var argv = aEvent.data.split(" "), argc = argv.length; argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) }); var win = aEvent.source; if (argv[0] === "REGISTER" && argc === 1) { this.remoteWindows.push(win); this.postMsg(win, "REGISTERED", document.title, this.slides.length); this.postMsg(win, "CURSOR", this.idx + "." + this.step); return; } if (argv[0] === "BACK" && argc === 1) this.back(); if (argv[0] === "FORWARD" && argc === 1) this.forward(); if (argv[0] === "START" && argc === 1) this.goStart(); if (argv[0] === "END" && argc === 1) this.goEnd(); if (argv[0] === "TOGGLE_CONTENT" && argc === 1) this.toggleContent(); if (argv[0] === "SET_CURSOR" && argc === 2) window.location.hash = "#" + argv[1]; if (argv[0] === "GET_CURSOR" && argc === 1) this.postMsg(win, "CURSOR", this.idx + "." + this.step); if (argv[0] === "GET_NOTES" && argc === 1) this.postMsg(win, "NOTES", this.getDetails(this.idx)); } Dz.toggleContent = function() { // If a Video is present in this new slide, play it. // If a Video is present in the previous slide, stop it. var s = $("section[aria-selected]"); if (s) { var video = s.$("video"); if (video) { if (video.ended || video.paused) { video.play(); } else { video.pause(); } } } } Dz.setCursor = function(aIdx, aStep) { // If the user change the slide number in the URL bar, jump // to this slide. aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0"; window.location.hash = "#" + aIdx + aStep; } Dz.onhashchange = function() { var cursor = window.location.hash.split("#"), newidx = 1, newstep = 0; if (cursor.length == 2) { newidx = ~~cursor[1].split(".")[0]; newstep = ~~cursor[1].split(".")[1]; if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) { newstep = 0; newidx++; } } this.setProgress(newidx, newstep); if (newidx != this.idx) { this.setSlide(newidx); } if (newstep != this.step) { this.setIncremental(newstep); } for (var i = 0; i < this.remoteWindows.length; i++) { this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step); } } Dz.back = function() { if (this.idx == 1 && this.step == 0) { return; } if (this.step == 0) { this.setCursor(this.idx - 1, this.slides[this.idx - 2].$$('.incremental > *').length); } else { this.setCursor(this.idx, this.step - 1); } } Dz.forward = function() { if (this.idx >= this.slides.length && this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) { return; } if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) { this.setCursor(this.idx + 1, 0); } else { this.setCursor(this.idx, this.step + 1); } } Dz.goStart = function() { this.setCursor(1, 0); } Dz.goEnd = function() { var lastIdx = this.slides.length; var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length; this.setCursor(lastIdx, lastStep); } Dz.setSlide = function(aIdx) { this.idx = aIdx; var old = $("section[aria-selected]"); var next = $("section:nth-of-type("+ this.idx +")"); if (old) { old.removeAttribute("aria-selected"); var video = old.$("video"); if (video) { video.pause(); } } if (next) { next.setAttribute("aria-selected", "true"); var video = next.$("video"); if (video && !!+this.params.autoplay) { video.play(); } } else { // That should not happen this.idx = -1; // console.warn("Slide doesn't exist."); } } Dz.setIncremental = function(aStep) { this.step = aStep; var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]'); if (old) { old.removeAttribute('aria-selected'); } var incrementals = $$('.incremental'); if (this.step <= 0) { $$.forEach(incrementals, function(aNode) { aNode.removeAttribute('active'); }); return; } var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1]; if (next) { next.setAttribute('aria-selected', true); next.parentNode.setAttribute('active', true); var found = false; $$.forEach(incrementals, function(aNode) { if (aNode != next.parentNode) if (found) aNode.removeAttribute('active'); else aNode.setAttribute('active', true); else found = true; }); } else { setCursor(this.idx, 0); } return next; } Dz.goFullscreen = function() { var html = $('html'), requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen; if (requestFullscreen) { requestFullscreen.apply(html); } } Dz.setProgress = function(aIdx, aStep) { var slide = $("section:nth-of-type("+ aIdx +")"); if (!slide) return; var steps = slide.$$('.incremental > *').length + 1, slideSize = 100 / (this.slides.length - 1), stepSize = slideSize / steps; this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%'; } Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]] aMsg = [aMsg]; for (var i = 2; i < arguments.length; i++) aMsg.push(encodeURIComponent(arguments[i])); aWin.postMessage(aMsg.join(" "), "*"); } function init() { Dz.init(); window.onkeydown = Dz.onkeydown.bind(Dz); window.onresize = Dz.onresize.bind(Dz); window.onhashchange = Dz.onhashchange.bind(Dz); window.onmessage = Dz.onmessage.bind(Dz); } window.onload = init; </script> <script> // Helpers if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { // closest thing possible to the ECMAScript 5 internal IsCallable // function if (typeof this !== "function") throw new TypeError( "Function.prototype.bind - what is trying to be fBound is not callable" ); var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply( this instanceof fNOP ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments))); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }; } var $ = (HTMLElement.prototype.$ = function(aQuery) { return this.querySelector(aQuery); }).bind(document); var $$ = (HTMLElement.prototype.$$ = function(aQuery) { return this.querySelectorAll(aQuery); }).bind(document); $$.forEach = function(nodeList, fun) { Array.prototype.forEach.call(nodeList, fun); } </script> <!-- vim: set fdm=marker: }}} -->