Infrastructures in a horizontal farmers community
hakimel 9a657e2676 ie8 support (closes #96) | vor 12 Jahren | |
---|---|---|
css | vor 12 Jahren | |
js | vor 12 Jahren | |
lib | vor 12 Jahren | |
plugin | vor 12 Jahren | |
.gitignore | vor 12 Jahren | |
LICENSE | vor 12 Jahren | |
README.md | vor 12 Jahren | |
index.html | vor 12 Jahren | |
package.json | vor 12 Jahren |
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. A classList polyfill is incuded to make this work in < iOS 5, < Safari 5.1 and IE.
Curious about how it looks in action? Check out the demo page.
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:
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>
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.
This is based on data-markdown from Paul Irish which in turn uses showdown. This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). Updates to come.
<section data-markdown>
## Page title
A paragraph with some text and a [link](http://hakim.se).
</section>
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.
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// Push each slide change to the browser history
history: false,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Loop the presentation
loop: false,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0
autoSlide: 0,
// Enable slide navigation via mouse wheel
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: 'default', // default/neon/beige
// Transition style
transition: 'default' // default/cube/page/concave/linear(2d)
});
The Reveal class provides a minimal JavaScript API for controlling navigation and reading state:
// Navigation
Reveal.navigateTo( indexh, indexv );
Reveal.navigateLeft();
Reveal.navigateRight();
Reveal.navigateUp();
Reveal.navigateDown();
Reveal.navigatePrev();
Reveal.navigateNext();
Reveal.toggleOverview();
// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } }
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.
Furthermore you can also listen to these changes in state via JavaScript:
Reveal.addEventListener( 'somestate', function() {
// TODO: Sprinkle magic
}, false );
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.
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
When a slide fragment is either shown or hidden reveal.js will dispatch an event.
Reveal.addEventListener( 'fragmentshown', function( event ) {
// event.fragment = the fragment DOM element
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
// event.fragment = the fragment DOM element
} );
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; 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:
node plugin/speakernotes
By default, the slides will be served at localhost:1947.
You can change the appearance of the speaker notes by editing the file at plugin/speakernotes/notes.html
.
Send me a link if you used reveal.js for a project or presentation.
Reveal.getPreviousSlide()
Reveal.getCurrentSlide()
Reveal.getIndices()
.present
class was sometimes left on the previous slideReveal.getQueryHash()
#reveal container
is now selected via a class instead of IDslidechange
event now includes currentSlide and previousSlideslidechange
was firing twice when history was enabledautoSlide
configslidechanged
event is now firing upon hashchange
. Thanks basecodeprogress
option was true but there was no progress DOM elementkeyboard
config flag for disabling all keyboard navigationReveal.addEventListener
, Reveal.removeEventListener
)slidechanged
eventfragmentshown
/ fragmenthidden
)#main
wrapper is now called #reveal
#reveal .slides
#reveal
#reveal
, to prevent conflictsclassList
polyfill for IE9data-state
on a slidetransition
option for specifying transition stylestheme
option for specifying UI stylesbox
& page
neon
.fragment
classMIT licensed
Copyright (C) 2012 Hakim El Hattab, http://hakim.se