|
|
há 13 anos atrás | |
|---|---|---|
| assets | há 14 anos atrás | |
| css | há 13 anos atrás | |
| js | há 13 anos atrás | |
| lib | há 13 anos atrás | |
| .gitignore | há 14 anos atrás | |
| LICENSE | há 14 anos atrás | |
| README.md | há 13 anos atrás | |
| index.html | há 13 anos atrás |
A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't rely on any external libraries but highlight.js is included by default for code highlighting.
Note that this requires a browser with support for CSS 3D transforms and classList. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. You could also use a polyfill for classList to make this work in < iOS 5 and < Safari 5.1, here's one from @remy.
Curious about how this looks in action? Check out the demo page.
Send me a link if you used reveal.js for a project or presentation.
Markup heirarchy needs to be <div id="reveal"> <div class="slides"> <section> where the <section> represents one slide and can be repeated indefinitely. If you place multiple <section>'s inside of another <section> they will be shown as vertical slides.
At the end of your page, after <script src="js/reveal.js"></script>, you need to initialize reveal. Note that all config values are optional.
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: 'default', // default/neon
// Transition style
transition: 'default' // default/cube/page/concave/linear(2d)
});
MIT licensed
Copyright (C) 2011 Hakim El Hattab, http://hakim.se