# reveal.js 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]( # Examples * (original) * from [@achrafkassioui]( * from [@lucienfrelin]( * * [@ModusCreate]( [Send me a link]( if you used reveal.js for a project or presentation. # Usage 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) }); ``` # History #### 1.2 (master) - Big changes to DOM structure: - 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 - Config option for disabling updates to URL, defaults to true - Anchors with image children no longer rotate in 3D on hover - Support for mouse wheel navigation ([naugtur]( #### 1.1 - Added an optional presentation progress bar - Images wrapped in anchors no longer unexpectedly flip in 3D - Slides that contain other slides are given the 'stack' class - Added 'transition' option for specifying transition styles - Added 'theme' option for specifying UI styles - New transitions: 'box' & 'page' - New theme: 'neon' #### 1.0 - New and improved style - Added controls in bottom right which indicate where you can navigate - Reveal views in iteratively by giving them the .fragment class - Code sample syntax highlighting thanks to [highlight.js]( - Initialization options (toggling controls, toggling rolling links, transition theme) #### 0.3 - Added licensing terms - Fixed broken links on touch devices #### 0.2 - Refactored code and added inline documentation - Slides now have unique URL's - A basic API to invoke navigation was added #### 0.1 - First release - Transitions and a white theme # License MIT licensed Copyright (C) 2011 Hakim El Hattab,