Web slideshow World – Introducing Reveal.js – REVEAL.js
Web slideshow World – Introducing Reveal.js – REVEAL.js
0 0
antonama.github.io
On Github antonama / antonama.github.io
Web slideshow World
or Forget Old Fart PowerPoint
by Anton Abramovich
Introducing Reveal.js
What the heck is it?
Reveal.js
"A framework for easily creating beautiful presentations using HTML" Hakim El Hattab - the authorREVEAL.js
allow
do
cool
things
in
modern
browsers
and more
Reveal.js
Killer features
- Online editor
- Nice default styles
- Code highlighter
- Two-way navigation
- Export to PDF
- "Pause" mode
- Multiplexing
- It is absoultely free
REVEAL.js
"How to" guide
Simply use slid.es
but if you feel like html/css ninja
use the source
and follow next steps...
Step 1
Add references to the reveal.js <base>
and theme style sheets to the <head>section
<link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme">
Step 2
Each slide is <section> element
inside this structure
<div class="reveal">
<div class="slides">
...
</div>
</div>
Step 3
<section> inside other <section> is a vertical slide
The first of the vertical slides is the "root" of the others,
and it will be included in the horizontal sequence.
<section> <section>Vertical slide 1</section> <section>Vertical slide 2</section> </section>
Step 4
Load Javascript references at bottom
<script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script>
Step 5
Call Reveal.initialize() at bottom
<script>
Reveal.initialize({
controls: false //optional
});
</script>
Required, even if empty.
Final step
Make your own awesomeness
Color Schemes
The framework comes with a few different themes included:
- default: Gray background, white text, blue links
- sky: Blue background, thin white text, blue links
- serif: Cappuccino background, gray text, brown links
and more...
Color Schemes
Each theme is available as a separate stylesheet.
To change theme, replace default with desired theme name
<link rel="stylesheet" href="css/theme/default.css" id="theme">
Create your own
Browser Support
reveal.js has five tiers of browser support:
1. 3D Transforms version
Chrome, Safari, Firefox,
Opera and IE10.
Browser support
2. 2D UI with only linear animations
Maxthon, Android 2.3.7 stock browser, Dolphin 9.
Browser support
3. 2D UI with no animation
IE9, Firefox 3.6
Browser support
3. 2D UI showing all slides in a vertical row
IE8, the Kindle Fire
Silk Browser 1.0 and Maxthon Mobile.
Browser support
Absolutely no support
IE7 and lower, all non-JavaScript browsers.