Skip to content

Instantly share code, notes, and snippets.

@benve

benve/slides.html

Created April 6, 2011 13:11
Show Gist options
  • Save benve/905611 to your computer and use it in GitHub Desktop.
Save benve/905611 to your computer and use it in GitHub Desktop.
Download ZIP
DZ-Slides: HTML Template for your presentations
Raw
slides.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
***************************************************
* *
* DZ-Slides: HTML Template for your presentations *
* *
***************************************************
More information: http://paulrouget.com/dzslides
Author: @paulrouget <paul@mozilla.com>
Contributor(s):
- Anthony Ricaud <rik24d@gmail.com>
- Louis-Rémi Babé <lrbabe@gmail.com>
LICENSE:
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
-->
<title>The title of your presentation</title>
<!--
************************************
* *
* CSS *
* *
************************************
-->
<style>
/*
************************************
* CSS CORE: *
* YOU DON'T WANT TO EDIT THIS *
* (but you can) *
************************************
*/
html { overflow: hidden; }
body, html { height: 100%; padding: 0px; }
body { margin: auto; position: relative; }
img, video { vertical-align: middle; }
/* FIXME : Mandatory for flex box model, Firefox bug */
/* See JS hack */
section > div { width: 100%; display: -moz-box; -moz-box-orient : vertical; -moz-box-pack : center; -moz-box-align : center; }
section > div { width: 100%; display: -webkit-box; -webkit-box-orient : vertical; -webkit-box-pack : center; -webkit-box-align : center; }
footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; padding: 1em; width: 100%; }
.flex-wrapper { display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; }
footer .flex-space { -moz-box-flex: 1; -webkit-box-flex: 1; }
section { -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 1s, 1s; pointer-events: none; display: block; width: 100%; margin: auto; position: absolute; padding: 0 10px; opacity: 0; -moz-box-sizing: border-box; }
section { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s, 1s; pointer-events: none; -webkit-box-sizing: border-box; }
section h1, section h2, section h3, section p { text-align: center; margin: .3em; margin: 0; padding: 0; }
section[aria-selected] { opacity: 1; pointer-events: auto; -moz-transition-delay: 1s, 1s; -webkit-transition-delay: 1s, 1s; }
pre { font-size: 35px; border-left: 6px solid white; padding-left: 10px; white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ line-height: 1.3em; }
a { color: white!important; text-decoration: none; }
/*
************************************
* CSS OPTIONS: *
* YOU WANT TO EDIT THIS *
* *
************************************
*/
/* Want your own font? Use font-face */
@font-face {
/* Uncomment and add your own font file
font-family: fface;
src: url(myfont.ttf);
*/
}
/* The backgrounds of all your slides */
body {
/* Could be an image, a color, a gradient */
background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #006EA0 0%, #304160 600px);
background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#006EA0), to(#304160));
background-color: #006EA0;
}
/* This is the style of a slide */
section {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight: bold;
font-size: 60px;
text-shadow: 0px -2px 0px #374683;
color: white;
/*
Your own font?
font-family: fface;
*/
}
/* This part define the transitions between the slides
Here I propose 3 differents effect:
Default translation (classic "sliding" effect)
Rotation (a bit dizzy... "DZ"? You get it? \o/)
Nothing (just a fadein/fadeout)
With the CSS3 transformations, you can create your own.
*/
/* Let me describe how the slides work:
A slide can be:
- the current slide
- A upcoming slide (from the "future")
- A slide already seen (from the "past")
With CSS, you describe where are those slide,
in the space. Then, a transition will animate
this.
*/
/* "PAST" ******************************/
section {
/* The sliding effect */
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
/* The rotating effect
-moz-transform: scale(0.3) rotate(180deg);
-webkit-transform: scale(0.3) rotate(180deg);
*/
/* The nothing effect */
/* Well, just comment out the rotating and sliding effect*/
}
/* The footer with the title + the current slide number */
#footer {
display: block;
color: white;
opacity: 0.5;
/*
display: none;
*/
}
/* "PRESENT" ****************************/
/* Current slide */
section[aria-selected] {
-moz-transform: scale(1.0) translate(0, 0);
-webkit-transform: scale(1.0) translate(0, 0);
}
/* "FUTURE" *****************************/
/* Selector not yet supported by Webkit :( */
section[aria-selected] ~ section {
/* The sliding effect */
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
/* The rotating effect
-moz-transform: scale(5) rotate(-180deg);
-webkit-transform: scale(5) rotate(-180deg);
*/
/* The nothing effect */
/* Well, just comment the rotating and sliding effect*/
}
</style>
</head>
<!--
************************************
* *
* HTML: YOUR SLIDES *
* *
************************************
-->
<section>
<h1>BOooooooYaaa!</h1>
</section>
<section>
<h1>This is a h1</h1>
</section>
<section>
<h2>This is a h2</h2>
<p>This is a p</p>
</section>
<section>
<h1>An image</h1>
<img src="http://paulrouget.com/dzslides/example.jpg">
</section>
<section>
<h1>A list</h1>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<section>
<h1>Some code?</h1>
<pre>
window.onload = function() {
foobar();
alert("mop");
}</pre>
</section>
<section data-onload="playVideo"
data-onunload="stopVideo">
<script>
// |section| referes to this section element
function playVideo(section) {
section.querySelector("video").play();
}
function stopVideo(section) {
section.querySelector("video").pause();
}
</script>
<h1>A video</h1>
<video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video>
</section>
<section>
<p>the end :)</p>
</section>
<script>
/*
************************************
* *
* JAVASCRIPT *
* (You don't have to read this) *
************************************
*/
function init() {
var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
var title = document.querySelector("title").textContent;
var slides = document.querySelectorAll("body > section");
for (var i = 1, il = slides.length; i <= il; i++) {
// FIXME : Mandatory for flex box model for vertical align
// Firefox bug :(
slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
}
var footer = document.createElement("footer");
footer.id = "footer";
footer.innerHTML =
'<div class="flex-wrapper"><p>' + title + '</p>' +
'<p class="flex-space"></p>' +
'<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
document.body.appendChild(footer);
history.go(- slides.length + firstFrame);
window.addEventListener("popstate", function(e) {
if(e.state) {
var old = document.querySelector("section[aria-selected]");
var next = document.querySelector("section:nth-of-type("+ e.state +")");
if (old) {
old.removeAttribute("aria-selected");
if (old.hasAttribute("data-onunload")) {
window[old.getAttribute("data-onunload")].call(window, old);
}
}
if (next) {
next.setAttribute("aria-selected", "true");
if (next.hasAttribute("data-onload")) {
window[next.getAttribute("data-onload")].call(window, next);
}
}
var index = document.querySelector("#index .pagenumber");
index.innerHTML = e.state;
}
}, true);
}
function resize() {
var style = document.getElementById("resizeStyle");
if (!style) {
style = document.createElement("style");
style.id = "resizeStyle";
document.head.appendChild(style);
}
style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
}
window.addEventListener("resize", resize, true);
window.addEventListener("load", resize, true);
window.addEventListener("load", init, true);
// Webkit bug
// window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
window.addEventListener("keydown", function(e) {
// Don't intercept keyboard shortcuts
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
return;
}
if ( e.keyCode == 80 // p
|| e.keyCode == 66 // b
|| e.keyCode == 37 // left arrow
|| e.keyCode == 33 // page up
) {
e.preventDefault();
history.back();
}
if ( e.keyCode == 78 // n
|| e.keyCode == 32 // space
|| e.keyCode == 39 // right arrow
|| e.keyCode == 34 // page down
) {
e.preventDefault();
history.forward();
}
}, true);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment