Source

Exposicion servicios de directorios /

Filename Size Date modified Message
assets
css
js
lib
1.0 KB
3.6 KB
7.6 KB

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

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, http://hakim.se

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.