This time I will share jQuery Plugin and tutorial about Beautiful HTML Presentation Library – reveal.js, hope it will help you in programming stack.
reveal.js is a poweful jQuery JavaScript library for creating beautiful, touch-enable, full-features, powerpoint-like HTML5 presentation on the webpage.
Key Features:
- Supports unlimited levels of nested slides.
- Slide overview mode when you press ESC key.
- Optimized for mobile & touch devices.
- Allows you to write slide content using inline or external Markdown.
- Supports fragments in a slide.
- Performant Fade, Slide, Convex, Concave, Zoom transitions.
- 10+ built-in themes to fit your design.
- You can link between slides internally.
- Presentations can be exported to PDF.
- Allows you to pause the presentation with B or . key.
- Right-to-left support
- Extensive JavaScript API
- Auto-progression
- Parallax backgrounds
- Custom keyboard bindings
- Image, iframe, video, parallax background.
Basic usage:
1. Download the package and load the necessary JavaScript and CSS files in the HTML document.
1 |
<link rel="stylesheet" href="css/reveal.css" /> |
2 |
<script src="js/reveal.js"></script> |
2. Load a theme of your choice in the document:
01 |
<link rel="stylesheet" href="css/theme/beige.css" /> |
02 |
<link rel="stylesheet" href="css/theme/black.css" /> |
03 |
<link rel="stylesheet" href="css/theme/blood.css" /> |
04 |
<link rel="stylesheet" href="css/theme/league.css" /> |
05 |
<link rel="stylesheet" href="css/theme/moon.css" /> |
06 |
<link rel="stylesheet" href="css/theme/night.css" /> |
07 |
<link rel="stylesheet" href="css/theme/serif.css" /> |
08 |
<link rel="stylesheet" href="css/theme/simple.css" /> |
09 |
<link rel="stylesheet" href="css/theme/sky.css" /> |
10 |
<link rel="stylesheet" href="css/theme/solarized.css" /> |
11 |
<link rel="stylesheet" href="css/theme/white.css" /> |
3. Initialize the reveal.js and we’re ready to go.
4. Load an extersion as per your needs. All possible extensions:
- highlight: Synax highlighter.
- markdown: Handles parsing of markdown inside of presentations as well as loading of external markdown documents.
- math: Enables rendering of math equations inside of reveal.js slides. Essentially a thin wrapper for MathJax.
- notes-server: Notes server.
- notes: Handles opening of and synchronization with the reveal.js notes window.
- print-pdf: Prints presentations to PDF.
- search: Handles finding a text string anywhere in the slides and showing the next occurrence to the user by navigatating to that slide and highlighting it.
- zoom-js: Applies zoom-in/out animations to slides
04 |
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, |
05 |
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, |
08 |
{ src: 'plugin/highlight/highlight.js', async: true }, |
11 |
{ src: 'plugin/zoom-js/zoom.js', async: true }, |
14 |
{ src: 'plugin/notes/notes.js', async: true }, |
17 |
{ src: 'plugin/math/math.js', async: true } |
5. Insert your own slides into the presentation and done.
03 |
<section>Slide 1</section> |
05 |
<section>Vertical Slide 2-1</section> |
06 |
<section>Vertical Slide 2-2</section> |
08 |
<section>Slide 3</section> |
6. Or write your content using Markdown
01 |
<section data-markdown> |
02 |
<textarea data-template> |
07 |
<section data-markdown="example.md" |
09 |
data-separator-vertical="^nn" |
10 |
data-separator-notes="^Note:" |
11 |
data-charset="iso-8859-15"> |
12 |
Or load from an external Markdown file |
15 |
<section data-markdown> |
16 |
<script type="text/template"> |
23 |
<section data-markdown> |
24 |
<script type="text/template"> |
7. All default configuration options to customize your presentation.
008 |
controlsTutorial: true, |
