2011-12-05 03:21:15 +01:00
# reveal.js
2011-06-07 22:38:22 +02:00
2011-12-27 06:34:53 +01:00
A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js ](http://softwaremaniacs.org/soft/highlight/en/description/ ) is included by default for code highlighting.
2012-05-03 18:42:53 +02:00
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. A [classList polyfill ](http://purl.eligrey.com/github/classList.js/blob/master/classList.js ) is incuded to make this work in < iOS 5 , < Safari 5 . 1 and IE .
2011-12-05 03:21:15 +01:00
2012-04-04 07:24:26 +02:00
Curious about how it looks in action? [Check out the demo page ](http://lab.hakim.se/reveal-js/ ).
2011-12-05 03:21:15 +01:00
2012-04-04 07:24:26 +02:00
## Usage
2012-01-15 03:20:52 +01:00
2012-04-04 07:24:26 +02:00
### Markup
2012-01-15 03:20:52 +01:00
2012-07-16 10:53:33 +02:00
Markup heirarchy needs to be ``< div class = "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. For example:
2012-04-04 07:24:26 +02:00
2012-06-07 04:52:49 +02:00
```html
2012-07-15 22:37:06 +02:00
< div class = "reveal" >
2012-04-04 07:24:26 +02:00
< div class = "slides" >
< section > Single Horizontal Slide< / section >
< section >
< section > Vertical Slide 1< / section >
< section > Vertical Slide 2< / section >
< / section >
< / div >
< / div >
```
2012-07-31 07:49:02 +02:00
### Markdown
It's possible to write your slides using Markdown. To enable Markdown simply add the ```data-markdown``` attribute to your ```< section > ``` elements and reveal.js will automatically load the JavaScript parser.
2012-08-01 05:47:09 +02:00
This is based on [data-markdown ](https://gist.github.com/1343518 ) from [Paul Irish ](https://github.com/paulirish ) which in turn uses [showdown ](https://github.com/coreyti/showdown/ ). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). Updates to come.
2012-07-31 07:49:02 +02:00
```html
< section data-markdown >
## Page title
A paragraph with some text and a [link ](http://hakim.se ).
< / section >
```
2012-04-04 07:24:26 +02:00
### Configuration
2012-07-16 01:21:47 +02:00
At the end of your page, after ``< script src = "js/reveal.js" > < / script > ``, you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.
2012-01-15 03:20:52 +01:00
2012-06-07 04:52:49 +02:00
```javascript
2012-01-15 03:20:52 +01:00
Reveal.initialize({
2012-04-04 07:24:26 +02:00
// Display controls in the bottom right corner
2012-01-15 03:20:52 +01:00
controls: true,
// Display a presentation progress bar
progress: true,
2012-07-16 01:21:47 +02:00
// Push each slide change to the browser history
history: false,
2012-01-15 03:20:52 +01:00
2012-07-21 04:20:07 +02:00
// Enable keyboard shortcuts for navigation
keyboard: true,
2012-07-16 01:21:47 +02:00
// Loop the presentation
2012-04-28 18:16:56 +02:00
loop: false,
2012-07-16 01:21:47 +02:00
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0
autoSlide: 0,
// Enable slide navigation via mouse wheel
2012-01-15 04:22:27 +01:00
mouseWheel: true,
2012-01-15 03:20:52 +01:00
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
2012-07-13 05:08:21 +02:00
theme: 'default', // default/neon/beige
2012-01-15 03:20:52 +01:00
// Transition style
transition: 'default' // default/cube/page/concave/linear(2d)
});
```
2012-04-04 07:24:26 +02:00
### API
2012-07-27 04:54:36 +02:00
The Reveal class provides a minimal JavaScript API for controlling navigation and reading state:
2012-04-04 07:24:26 +02:00
2012-07-21 04:57:23 +02:00
```javascript
2012-07-27 04:54:36 +02:00
// Navigation
2012-07-21 04:57:23 +02:00
Reveal.navigateTo( indexh, indexv );
Reveal.navigateLeft();
Reveal.navigateRight();
Reveal.navigateUp();
Reveal.navigateDown();
Reveal.navigatePrev();
Reveal.navigateNext();
Reveal.toggleOverview();
2012-07-27 04:54:36 +02:00
// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } }
2012-07-21 04:57:23 +02:00
```
2012-04-04 07:24:26 +02:00
### States
2012-05-04 06:01:20 +02:00
If you set ``data-state="somestate"`` on a slide ``< section > ``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
2012-04-04 07:24:26 +02:00
Furthermore you can also listen to these changes in state via JavaScript:
2012-06-07 04:52:49 +02:00
```javascript
2012-05-04 06:01:20 +02:00
Reveal.addEventListener( 'somestate', function() {
2012-04-04 07:24:26 +02:00
// TODO: Sprinkle magic
}, false );
```
2012-05-04 06:01:20 +02:00
### Slide change event
2012-06-07 04:46:21 +02:00
An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
2012-05-04 06:01:20 +02:00
2012-06-07 04:52:49 +02:00
```javascript
2012-05-04 06:01:20 +02:00
Reveal.addEventListener( 'slidechanged', function( event ) {
2012-06-07 04:46:21 +02:00
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
2012-05-04 06:01:20 +02:00
} );
```
2012-06-01 03:31:28 +02:00
### Fragment events
When a slide fragment is either shown or hidden reveal.js will dispatch an event.
2012-06-07 04:52:49 +02:00
```javascript
2012-06-01 03:31:28 +02:00
Reveal.addEventListener( 'fragmentshown', function( event ) {
// event.fragment = the fragment DOM element
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
// event.fragment = the fragment DOM element
} );
```
2012-07-10 03:26:11 +02:00
### Folder Structure
- **css/** Core styles without which the project does not function
- **js/** Like above but for JavaScript
- **plugin/** Components that have been developed as extensions to reveal.js
- **lib/** All other third party assets (JavaScript, CSS, fonts)
2012-06-08 05:21:14 +02:00
## Speaker Notes
If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another.
To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
You'll also need to [install Node.js ](http://nodejs.org/ ); then, install the server dependencies by running `npm install` .
Once Node.js and the dependencies are installed, run the following command from the root directory:
2012-07-10 03:30:54 +02:00
node plugin/speakernotes
2012-06-08 05:21:14 +02:00
By default, the slides will be served at [localhost:1947 ](http://localhost:1947 ).
2012-07-10 03:30:54 +02:00
You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html` .
2012-06-08 05:21:14 +02:00
### Known Issues
- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions.
2012-05-04 06:01:20 +02:00
2012-04-28 18:42:18 +02:00
## Examples
* http://lab.hakim.se/reveal-js/ (original)
* http://www.ideapolisagency.com/ by [@achrafkassioui ](http://twitter.com/achrafkassioui )
* http://lucienfrelin.com/ by [@lucienfrelin ](http://twitter.com/lucienfrelin )
* http://creatorrr.github.com/ThePoet/
* http://moduscreate.com/ by [@ModusCreate ](https://twitter.com/ModusCreate )
* http://idea.diwank.name/ by [Diwank Singh ](http://diwank.name/ )
2012-06-01 02:27:08 +02:00
* [Webapp Development Stack & Tooling ](http://dl.dropbox.com/u/39519/talks/jquk-tooling%2Bappstack/index.html ) by [Paul Irish ](https://github.com/paulirish )
2012-04-28 18:42:18 +02:00
* [Lock-free algorithms ](http://concurrencykit.org/presentations/lockfree_introduction/ ) by Samy Al Bahra
2012-06-01 02:27:08 +02:00
* [Not Your Average Drag and Drop ](http://www.thecssninja.com/talks/not_your_average_dnd/ ) by [Ryan Seddon ](https://github.com/ryanseddon )
2012-04-28 18:42:18 +02:00
* [Elasticsearch ](http://spinscale.github.com/elasticsearch/2012-03-jugm.html ) by [@spinscale ](http://twitter.com/spinscale )
2012-06-01 02:27:08 +02:00
* [JavaScript Tooling ](http://dl.dropbox.com/u/39519/talks/jsconf-tools/index.html ) by [Paul Irish ](https://github.com/paulirish )
* [The Graphical Web: Fostering Creativity ](http://vhardy.github.com/presentations/html5-community-meet-up-2012/ ) by [Vincent Hardy ](https://github.com/vhardy )
* [Mobile Web Programming is a Bloody Mess ](http://westcoastlogic.com/slides/debug-mobile/ ) by [Brian LeRoux ](https://github.com/brianleroux )
2012-04-28 18:42:18 +02:00
* [Bio Database Access and Sequence Alignment ](http://www.philipbjorge.com/bioinformatics-presentation/ ) by [Philip Bjorge ](https://github.com/philipbjorge )
* [Web vs Native ](http://prez.mahemoff.com/state-native/ ) by [Michael Mahemoff ](https://github.com/mahemoff )
2012-05-09 16:04:39 +02:00
* [Continuously Integrated JS Development ](http://trodrigues.net/presentations/buster-ci/ ) by [Tiago Rodrigues ](https://github.com/trodrigues )
2012-05-25 21:11:03 +02:00
* [To be Future Friendly is to be Device Agnostic ](http://dl.dropbox.com/u/409429/presentations/toster-2012/index.html ) by [Joe McCann ](https://github.com/joemccann )
2012-06-01 02:27:08 +02:00
* [The Web Development Workflow of 2013 ](http://dl.dropbox.com/u/39519/talks/fluent/index.html ) by [Paul Irish ](https://github.com/paulirish )
* [How To Cope With Graphical Challenges Using Latest Web Technologies ](http://alexw.me/playground/slideshows/w3c_netcraft/ ) by [Alex Wolkov ](https://github.com/altryne )
2012-06-03 04:37:32 +02:00
* [Going Deeper with jQuery Mobile ](http://andymatthews.net/downloads/presentations/going-deeper-with-jquery-mobile/ ) by [Andy Matthews ](https://github.com/commadelimited )
2012-06-07 02:19:21 +02:00
* [Studio Nord ](http://studionord.org )
2012-07-13 03:26:37 +02:00
* [Herrljunga Cider ](http://herrljungacider.se/uk/campaign/ )
2012-07-21 05:44:42 +02:00
* [PhoneGap Pain Points ](http://phonegap-pain-points.appspot.com/ ) by [Pamela Fox ](https://github.com/pamelafox )
2012-08-02 05:03:31 +02:00
* [Using HTML5 To Power Your Game Production ](http://www.blitzgamesstudios.com/blitztech/html5-presentation ) by Richard Hackett
2012-06-01 02:27:08 +02:00
2012-04-28 18:42:18 +02:00
[Send me a link ](http://hakim.se/about/contact ) if you used reveal.js for a project or presentation.
2012-04-04 07:24:26 +02:00
## History
2012-07-21 04:52:08 +02:00
#### 1.5 (master/beta)
2012-07-27 04:54:36 +02:00
- New API method ```Reveal.getPreviousSlide()```
- New API method ```Reveal.getCurrentSlide()```
- New API method ```Reveal.getIndices()```
2012-07-31 07:35:16 +02:00
- Fixed bug where the ```.present``` class was sometimes left on the previous slide
- Added support for slides written using markdown
- Added helped method ```Reveal.getQueryHash()```
2012-08-04 03:21:49 +02:00
- Added EOT font for IE support
2012-08-04 03:49:29 +02:00
- IE8 support
2012-08-04 04:02:16 +02:00
- Fixed bug where hovering 3D links in Chrome caused them to disappear
2012-08-04 04:41:31 +02:00
- Disable 3D links in IE and more accurate CSS feature detection
2012-08-04 19:54:17 +02:00
- CSS is more relative in sizing to allow for low resolutions. Thanks [StereotypicalApps ](https://github.com/StereotypicalApps )
2012-07-21 04:52:08 +02:00
#### 1.4
2012-07-21 04:57:23 +02:00
- Main ```#reveal container``` is now selected via a class instead of ID
2012-06-03 00:39:35 +02:00
- API methods for adding or removing all event listeners
2012-07-21 04:20:07 +02:00
- The ```slidechange``` event now includes currentSlide and previousSlide
2012-07-21 04:57:23 +02:00
- Fixed bug where ```slidechange``` was firing twice when history was enabled
2012-07-10 03:00:51 +02:00
- Folder structure updates for scalability (see /lib & /plugin)
2012-07-04 20:30:18 +02:00
- Slide notes by [rmurphey ](https://github.com/rmurphey )
2012-07-13 04:54:26 +02:00
- Bumped up default font-size for code samples
2012-07-13 05:08:21 +02:00
- Added beige theme
2012-07-21 04:57:23 +02:00
- Added ```autoSlide``` config
- Bug fix: The ```slidechanged``` event is now firing upon ```hashchange```. Thanks [basecode ](https://github.com/basecode )
- Bug fix: JS error when the ```progress``` option was true but there was no progress DOM element
2012-07-21 04:20:07 +02:00
- ```keyboard``` config flag for disabling all keyboard navigation
2012-06-03 00:18:34 +02:00
#### 1.3
2012-04-28 17:50:22 +02:00
- Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff ](https://github.com/mahemoff )
2012-04-28 18:16:56 +02:00
- Added support for looped presentations via config
2012-05-04 06:01:20 +02:00
- Fixed IE9 fallback
2012-07-21 04:57:23 +02:00
- Added event binding methods (```Reveal.addEventListener```, ```Reveal.removeEventListener```)
- Added ```slidechanged``` event
2012-05-05 17:51:14 +02:00
- Added print styles. Thanks [skypanther ](https://github.com/skypanther )
2012-05-07 04:05:58 +02:00
- The address bar now hides automatically on mobile browsers
2012-06-01 02:27:08 +02:00
- Space and return keys can be used to exit the overview mode
2012-07-21 04:57:23 +02:00
- Events for fragment states (```fragmentshown``` / ```fragmenthidden```)
2012-06-03 00:24:23 +02:00
- Support for swipe navigation on touch devices. Thanks [akiersky ](https://github.com/akiersky )
2012-06-03 00:18:34 +02:00
- Support for pinch to overview on touch devices
2011-12-05 03:21:15 +01:00
2012-04-04 07:24:26 +02:00
#### 1.2
2012-01-15 03:20:52 +01:00
2011-12-27 06:29:00 +01:00
- Big changes to DOM structure:
2012-07-21 04:57:23 +02:00
- Previous ```#main``` wrapper is now called ```#reveal```
- Slides were moved one level deeper, into ```#reveal .slides```
- Controls and progress bar were moved into ```#reveal```
- CSS is now much more explicit, rooted at ```#reveal```, to prevent conflicts
2012-01-15 02:56:11 +01:00
- Config option for disabling updates to URL, defaults to true
- Anchors with image children no longer rotate in 3D on hover
2012-01-15 04:22:27 +01:00
- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
2012-03-24 17:48:16 +01:00
- Delayed updates to URL hash to work around a bug in Chrome
2012-07-21 04:57:23 +02:00
- Included a ```classList``` polyfill for IE9
2012-03-28 07:16:16 +02:00
- Support for wireless presenter keys
2012-07-21 04:57:23 +02:00
- States can now be applied as classes on the document element by adding ```data-state``` on a slide
2011-12-27 06:29:00 +01:00
2012-01-15 03:20:52 +01:00
#### 1.1
2011-12-22 09:11:57 +01:00
- Added an optional presentation progress bar
- Images wrapped in anchors no longer unexpectedly flip in 3D
2011-12-26 09:04:11 +01:00
- Slides that contain other slides are given the 'stack' class
2012-07-21 04:57:23 +02:00
- Added ```transition``` option for specifying transition styles
- Added ```theme``` option for specifying UI styles
- New transitions: ```box``` & ```page```
- New theme: ```neon```
2011-12-22 09:11:57 +01:00
2012-01-15 03:20:52 +01:00
#### 1.0
2011-12-05 03:21:15 +01:00
- New and improved style
- Added controls in bottom right which indicate where you can navigate
2012-07-21 04:57:23 +02:00
- Reveal views in iteratively by giving them the ```.fragment``` class
2011-12-05 03:21:15 +01:00
- Code sample syntax highlighting thanks to [highlight.js ](http://softwaremaniacs.org/soft/highlight/en/description/ )
- Initialization options (toggling controls, toggling rolling links, transition theme)
2012-01-15 03:20:52 +01:00
#### 0.3
2011-12-05 03:21:15 +01:00
- Added licensing terms
- Fixed broken links on touch devices
2012-01-15 03:20:52 +01:00
#### 0.2
2011-12-05 03:21:15 +01:00
- Refactored code and added inline documentation
- Slides now have unique URL's
- A basic API to invoke navigation was added
2012-01-15 03:20:52 +01:00
#### 0.1
2011-12-05 03:21:15 +01:00
- First release
2012-01-15 03:20:52 +01:00
- Transitions and a white theme
2011-06-07 22:38:22 +02:00
2012-04-04 07:24:26 +02:00
## License
2011-06-09 21:21:54 +02:00
MIT licensed
2012-04-28 17:50:22 +02:00
Copyright (C) 2012 Hakim El Hattab, http://hakim.se